文章内容
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 它能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。
组件集合
1、node-hbsfy和node-pugify
borwserify 支持 require handlebars模板及jade模板。
Github：
https://github.com/epeli/node-hbsfy
https://github.com/domenic/jadeify
2、node-glob
使用glob来返回目录中所有子文件（文件或文件夹）。
Github： https://github.com/isaacs/node-glob 教程： http://www.cnblogs.com/liulangmao/p/4552339.html glob通配符释义： http://blog.csdn.net/zhuchuji/article/details/51297819
3、gulp-inject
CSS和WebComponent 注入插件，将它们注入到index.html文件中（官方解释），把css，js这些静态文件注入到html文件中，不需要手动添加。
Github：
https://github.com/klei/gulp-inject
4、main-bower-files
通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖，返回一个文件数组。
Github： https://github.com/ck86/main-bower-files
5、vinyl-buffer
将虚拟的流文件转换为可以使用的的buffer文件。
Github： https://github.com/hughsk/vinyl-buffer
6、gulp-if
为功能执行添加条件判断，跟程序语言中的if是相同语义。
Github：
https://github.com/robrich/gulp-if
7、browserify-shim
browserify-shim 是一个转换工具,它会读取 package.json 文件的 “browserify-shim” 属性，将不遵循node风格的commonjs的输出写法的模块包转换成browserify可以读懂的模块包。
Github： https://github.com/thlorenz/browserify-shim
8、babel-polyfill
IE8兼容包。
Github： https://github.com/babel/babel/tree/master/packages/babel-polyfill
9、vueify
在browserify中编辑vue代码。
Github： https://github.com/babel/babel/tree/master/packages/babel-polyfill
10、watchify
Github： https://github.com/browserify/watchify
11、gulp.spritesmith
小图（图标）合成精灵图，拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON。
Github： https://github.com/twolfson/gulp.spritesmith
12、gulp-filter
在虚拟文件流中过滤特定的文件。
Github: https://github.com/sindresorhus/gulp-filter
13、gulp-order
The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src，这是官方定义，简单来说，就是按给定的顺序整理需要处理的文件集。
Github: https://github.com/sirlantis/gulp-order
14、gulp-concat 与 gulp-concat-css
合并js与css文件，比如合并多个js或css到一个文件。
Github: https://github.com/contra/gulp-concat https://github.com/mariocasciaro/gulp-concat-css
15、rework
Github: https://github.com/reworkcss/rework
16、del
使用glob匹配规则来删除文件或文件夹。
Github: https://github.com/sindresorhus/del
17、gulp-less和gulp-sass
编译less和sass文件的gulp插件。
Github: https://github.com/stevelacy/gulp-less https://github.com/dlmanning/gulp-sass
18、gulp-postcss
PostCSS把扩展的语法和特性（比如变量，混入，未来css预发，内联图像等）转换成现代的浏览器友好的CSS。
Github: https://github.com/postcss/gulp-postcss
19、gulp-usemin（不推荐使用）
根据预先在html文件（或者其它模板/视图中的文件）中声明好的blocks来执行一系列任务（例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中）来处理未优化的样式和脚本。
Github: https://github.com/pursual/gulp-usemin
20、gulp-htmlmin
压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。
Github: https://github.com/jonschlinkert/gulp-htmlmin
21、gulp-imagemin
压缩常见的图片格式，比如PNG，JPEG，GIF，甚至是SVG图片。
Github: https://github.com/sindresorhus/gulp-imagemin
22、gulp-clean-css
压缩css文件，减小文件大小，并给引用url添加版本号避免缓存。
Github: https://github.com/scniro/gulp-clean-css
23、gulp-uglify
专业压缩js文件，减小文件大小。
Github: https://github.com/terinjokes/gulp-uglify
24、gulp-rename
修改文件名称，比如有时我们需要把app.js改成app.min.js。
Github: https://github.com/hparra/gulp-rename
25、gulp-util
gulp工具包，可以打log啊，提示语颜色啊，提示音啊等等一些操作，不过一般就是用来打印日志。
Github: https://github.com/gulpjs/gulp-util
26、gulp-rev
根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。
Github： https://github.com/sindresorhus/gulp-rev
27、gulp-rev-replace
配合 gulp-rev 使用，拿到生成的 manifest。json 后替换对应的文件名称。
Github： https://github.com/jamesknelson/gulp-rev-replace
28、gulp-sourcemaps
处理 JavaScript 时生成 SourceMap。
Github： https://github.com/gulp-sourcemaps/gulp-sourcemaps
29、gulp-svg-symbols
合并SVG图标。
Github： https://github.com/Hiswe/gulp-svg-symbols
30、gulp-inject-string
在页面中插入内容。
Github： https://github.com/mikehazell/gulp-inject-string
31、gulp-replace
字符串替换的gulp 插件。
Github： https://github.com/lazd/gulp-replace
32、gulp-flatten
删除或替换文件的相对路径。
Github： https://github.com/armed/gulp-flatten
33、lazypipe
Lazypipe允许您创建一个不可变的、延迟初始化的管道。能在需要重用部分管道的环境中使用，比如gulp。它可以创建一些工厂来把你经常使用的功能 stream 链分离出来，变成一个通用插件功能链，然后放入需要这个链的链路上。
Github： https://github.com/OverZealous/lazypipe
34、event-stream
流操作，还不大清楚其原理。
Github： https://github.com/dominictarr/event-stream
35、gulp-autoprefixer
给CSS添加前缀，解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，非常有用。
Github： https://github.com/sindresorhus/gulp-autoprefixer
36、gulp-posthtml
html预处理 html中的rem转换等。
Github： https://github.com/posthtml/gulp-posthtml
37、postcss-pxtorem
CSS 转换 px 为 rem。
Github： https://github.com/cuth/postcss-pxtorem
38、envify
Github： https://github.com/hughsk/envify
39、vinyl-source-stream
在gulp或虚拟文件的流开始使用传统的文本流，对现有的npm流有更好的互操作性。
Github： https://github.com/hughsk/vinyl-source-stream
40、babelify
Github： https://github.com/babel/babelify
41、cssify和lessify
borwserify 支持 require css样式及less样式。
Github： https://github.com/davidguttman/cssify https://github.com/dstokes/lessify
42、preprocessify
条件注释/主要区分开发和上线环境，是否加载mock数据。
Github： https://github.com/bibliolabs/preprocessify
43、lodash
具有一致接口、模块化、高性能等特性的 JavaScript 扩展工具库。
Github： https://github.com/lodash/lodash 官方网站： https://lodash.com/
44、gulp-size
压缩字体文件。
Github： https://github.com/sindresorhus/gulp-size
45、gulp-size
压缩字体文件。
Github： https://github.com/sindresorhus/gulp-size
46、imagemin-pngquant
压缩png图片文件。
Github： https://github.com/sindresorhus/gulp-size
47、gulp-rev-delete-original
删除由gulp-rev或gulp-rev-all重写的原始文件。
Github： https://github.com/nib-health-funds/gulp-rev-delete-original
48、gulp-rev-css-url
提取样式中的相对路径。
Github： https://github.com/galkinrost/gulp-rev-css-url
49、gulp-rev-css-url
提取样式中的相对路径。
Github： https://github.com/galkinrost/gulp-rev-css-url
50、gulp-strip-debug
去掉console代码
Github： https://github.com/sindresorhus/gulp-strip-debug
51、gulp-cdnify
CDN地址替换。
Github： https://github.com/kaiqigong/gulp-cdnify