前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gulp插件及其使用。

//文件包含
//学习链接 https://www.npmjs.com/package/gulp-file-include
var fileInclude = require('gulp-file-include');
//示例:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
//读取index.html并替换其中还@@include,模板可以传变量,详情见以上链接进行学习
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
}); //压缩js插件
var uglify = require('gulp-uglify');
//示例:
/**
* 对js文件进行处理:压缩 注意:requirejs中变量名称不能在压缩时被修改,否则会导致requirejs失效
*/
gulp.task('dealJs', [ "clean" ], function() {
gulp.src('src/**/*.js').pipe(uglify({
mangle : false
// 类型:Boolean 默认:true 是否修改变量名
})) // 压缩js
.pipe(gulp.dest(''));
});
//压缩Css文件
var minifyCss = require('gulp-minify-css');
//示例/**
* 对js文件进行处理:压缩
*/
gulp.task('dealCss', [ "clean" ], function() {
gulp.src('src/**/*.css').pipe(minifyCss()) // 压缩css
.pipe(gulp.dest(''));
});
//压缩html
var htmlmin = require('gulp-htmlmin');
//示例:
//链接:http://www.ydcss.com/archives/20
var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin'); gulp.task('testHtmlmin', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/html/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'));
});
//删除文件或文件夹
var del = require('del'); //使用示例:
var gulp = require('gulp');
var del = require('del'); gulp.task('clean:mobile', function (cb) {
del([
'dist/report.csv',
// 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
'dist/mobile/**/*',
// 我们不希望删掉这个文件,所以我们取反这个匹配模式
'!dist/mobile/deploy.json'
], cb);
}); gulp.task('default', ['clean:mobile']);
//gulp-replace ,可以替换指定格式的字符到指定字符,例如: var replace = require('gulp-replace'); // 遍历所有的词条,替换文件流中存在的词条
for (var i = 0; i < words.length; i++) {
stream = stream.pipe(replace("${I18N[" + words[i] + "]}", getEnWord(words[i])));
}
就会把${I18N{admin.test}}这个格式的的内容替换成指定的字符

Gulp 插件及其使用的更多相关文章

  1. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  2. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  3. gulp插件(gulp-jmbuild),用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

  4. gulp插件gulp-usemin简单使用

    关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...

  5. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  6. 将less编译成css的gulp插件

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  7. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...

  8. gulp插件构建项目 压缩js、css、image、zip、web服务、跨域等插件

    推荐一个很好文: https://github.com/lin-xin/blog/issues/2 匹配符 *.**.!.{} gulp.src('./js/*.js') // * 匹配js文件夹下所 ...

  9. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

随机推荐

  1. Matlab人脸检測方法(Face Parts Detection)具体解释

    今天同学让我帮忙制作一个人脸表情识别的样本库,当中主要是对人脸进行裁剪,这里用到了一个相对较新的Matlab人脸检測方法Face Parts Detection.网上百度了一下发现关于Matlab人脸 ...

  2. tcpdump抓包和scp导出以及wireshark查看

    [命令和工具] tcpdump scp wireshark  (1)tcpdump sudo tcpdump -i eth0 -w /home/tcpdump/1.pcap host 10.214.1 ...

  3. python __getattr__ 巧妙应用

    在之前的文章有提到__getattr__函数的作用: 如果属性查找(attribute lookup)在实例以及对应的类中(通过__dict__)失败, 那么会调用到类的__getattr__函数, ...

  4. Eclipse 插件安装、升级和卸载的方法

    Eclipse 的插件可以装在内部,也可以装在外部,装在内部的方法很简单:把插件的features和plugins目录copy到eclipse的安装目录即可. eclipse和其插件升级比较频繁,用过 ...

  5. MVC+EF 入门教程(三)

    一.前言 上一节,我们将了生成数据库,那么这张我就将操作设计库. 二.在 Aplication 定义服务 在 Application 中添加文件夹(Blog)和 操作类(BlogServer).实例如 ...

  6. iOS 使用 CATransform3D 处理 3D 影像、制做互动立体旋转的效果

    1. Swift http://www.cocoachina.com/swift/20170518/19305.html domehttps://pan.baidu.com/s/1i4XXSkH OC ...

  7. SSH框架完全整合

    大三学期渐末,事情也挺多的,上周就开始着手整合SSH框架,到现在才真正的完成,过程中碰到了许多小问题(小问题大折腾,哭脸.jpg).本着善始善终的原则,最终把它给完成了. 本篇文章就在: win7 6 ...

  8. bzoj 1179: [Apio2009]Atm

    Description Input 第 一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路 的起点和终点的 ...

  9. Vue入门总结

    技术栈:VUE:Vue-router:Vue-resource:Vue-cli: 项目:个人博客vue重构 一.vue-cli脚手架搭建项目结构 全局安装vue-cli: npm install vu ...

  10. MySQL 字符集问题及安全的更新操作

    一.字符集乱码 1.操作系统字符集 [root@mysql5 ~]# cat /etc/system-release /etc/sysconfig/i18n CentOS release 6.5 (F ...