gulp前端自动化构建工具（二）：gulp插件/gulp模块介绍

本篇前言

上一篇介绍了本工具的功能、结构、命令，欢迎阅读。

为了让大家更好的了解gulp的强大，本篇将单独对本工具所用的所有gulp插件/gulp模块进行列举介绍，gulp模块的安装方法请点击模块的介绍链接，推荐使用淘宝镜像的npm进行。

gulp插件/gulp模块

1. gulp

   介绍：http://www.gulpjs.com.cn/docs/getting-started/

   作用：前端自动化构建工具，在国内经常使用的还有webpack和grunt。

   
   

2. path

   介绍：http://www.jianshu.com/p/fe41ee02efc8

   作用：文件路径解析工具

   
   

3. yargs

   介绍：https://www.npmjs.com/package/yargs

   作用：获取命令中的参数，获取参数后可以进行判断进而处理不同的任务

   
   

4. gulp-if

   介绍：https://www.npmjs.com/package/gulp-if/

   作用：判断插件,用于pipe导流管中

   
   

5. gulp-clean

   介绍：https://www.npmjs.com/package/gulp-clean

   作用：删除文件或文件夹

   
   

6. del

   介绍：https://www.npmjs.com/package/del

   作用：删除文件或文件夹

   
   

7. run-sequence

   介绍：https://www.npmjs.com/package/run-sequence

   作用：顺序执行多个自己指定的task任务

   
   

8. gulp-sourcemaps

   介绍：https://www.npmjs.com/package/gulp-sourcemaps

   作用：存储源代码位置信息插件，对应了转换前和转换后的代码位置，一般用于浏览器端调试压缩混淆后的JS代码

   
   

9. lazypipe

   介绍：https://www.npmjs.com/package/lazypipe

   作用：分离多个pipe导流管道至一个工厂，即把多个stream链进行单独集合

   
   

10. gulp-util

    介绍：https://www.npmjs.com/package/gulp-util

    作用：这里用只使用其日志打印功能

    
    

11. node-notifier

    介绍：https://www.npmjs.com/package/node-notifier

    作用：windows或unix系统使用任务栏通知工具，苹果系统用gulp-notify模块

    
    

12. gulp-sftp

    介绍：https://www.npmjs.com/package/gulp-sftp

    作用：FTP上传插件

    
    

13. gulp-tap

    介绍：https://www.npmjs.com/package/gulp-tap

    作用：进入pipe管道，可针对当前文档进行操作

    
    

14. gulp-watch

    介绍：https://www.npmjs.com/package/gulp-watch

    作用：可对指定的文件进行监听

    
    

15. stream-combiner2

    介绍：https://www.npmjs.com/package/stream-combiner2

    作用：合并多个stream，然后进行错误监听，可防止错误时导致进程中断

    
    

16. gulp-changed

    介绍：https://www.npmjs.com/package/gulp-changed

    作用：监听并且获取到stream中变更的文件

    
    

17. browser-sync

    介绍：https://www.npmjs.com/package/browser-sync

    作用：监听项目源文件变更，同步刷新浏览器，支持多浏览器或设置终端

    
    

18. vinyl-paths

    介绍：https://www.npmjs.com/package/vinyl-paths

    作用：操作pipe中文件的路径

    
    

19. fs

    介绍：http://nodejs.cn/api/fs.html

    作用：文件操作模块，即node.js中的file system

    
    

20. glob

    介绍：https://www.npmjs.com/package/glob

    作用：找到与参数相匹配的文件，用于同步搜索文件

    
    

21. gulp-filter

    介绍：https://www.npmjs.com/package/gulp-filter

    作用：筛选符合条件的文件对象并进行排除

    
    

22. gulp-rename

    介绍：https://www.npmjs.com/package/gulp-rename

    作用：重命名文件

    
    

23. gulp-cheerio

    介绍：https://www.npmjs.com/package/gulp-cheerio

    作用：可对HTML和XML文件进行DOM操作，类似jQuery操作

    
    

24. gulp-dom-src

    介绍：https://www.npmjs.com/package/gulp-dom-src

    作用：使HTML文档中所有script/link引用的文件形成一个stream

    
    

25. gulp-md5-plus

    介绍：https://www.npmjs.com/package/gulp-md5-plus

    作用：使HTML文档中的资源文件改为md5戳命名，同时也修改HTML的资源引用名

    
    

26. gulp-jsdoc3

    介绍：https://www.npmjs.com/package/gulp-jsdoc3

    作用：js自动生成文档

    
    

27. gulp-html-minifier

    介绍：https://www.npmjs.com/package/gulp-html-minifier

    作用：HTML文档压缩

    
    

28. gulp-uglify

    介绍：https://www.npmjs.com/package/gulp-uglify

    作用：JS文档压缩

    
    

29. gulp-clean-css

    介绍：https://www.npmjs.com/package/gulp-clean-css

    作用：CSS文档压缩

    
    

30. gulp-imagemin

    介绍：https://www.npmjs.com/package/gulp-imagemin

    作用：JPEG、PNG、GIF、SVG图片压缩

    
    

31. gulp-css-spriter

    介绍：https://www.npmjs.com/package/gulp-css-spriter

    作用：对单个CSS文档中使用的所有图片合并成一张图，并且CSS自动以绝对像素重新调用。即雪碧图、精灵图

    
    

32. gulp-css-base64

    介绍：https://www.npmjs.com/package/gulp-css-base64

    作用：对CSS文档的图片进行BASE64编码，可减少HTTPS请求，因大图使用后会造成CSS文档过大，所以需要控制适用图片的大小

    
    

33. gulp-useref

    介绍：https://www.npmjs.com/package/gulp-useref

    作用：合并HTML文档中JS、CSS为单一文件，并且改写资源请求

    
    

34. gulp-concat

    介绍：https://www.npmjs.com/package/gulp-concat

    作用：合并gulp.src()中文件为单一文件

    
    

35. browserify

    介绍：https://www.npmjs.com/package/browserify

    作用：合并指定入口JS文件内的依赖模块，适用于commonJS规范

    
    

36. gulp-webpack

    介绍：https://www.npmjs.com/package/gulp-webpack

    作用：合并指定入口JS文件内的依赖模块，适用于commonJS、AMD、CMD规范

    
    

37. gulp-seajs-combo

    介绍：https://www.npmjs.com/package/gulp-seajs-combo

    作用：合并指定入口JS文件内的依赖模块，适用于CMD规范，即SeaJs

    
    

38. amd-optimize

    介绍：https://www.npmjs.com/package/amd-optimize

    作用：合并指定入口JS文件内的依赖模块，适用于AMD规范，即RequireJs

    
    

39. gulp-less

    介绍：https://www.npmjs.com/package/gulp-less

    作用：编译less文件至css文件

    
    

40. gulp-sass

    介绍：https://www.npmjs.com/package/gulp-sass

    作用：编译sass文件至css文件

    
    

41. gulp-stylus

    介绍：https://www.npmjs.com/package/gulp-stylus

    作用：编译stylus文件至css文件

    
    

42. gulp-coffee

    介绍：https://www.npmjs.com/gulp-coffee

    作用：编译coffee文件至js文件

    
    

43. gulp-babel

    介绍：https://www.npmjs.com/package/gulp-babel

    作用：可编译ES6至ES5，编译react的JSX变为createElement调用，编译后支持IE8以上普通浏览器

    
    

44. gulp-react

    介绍：https://www.npmjs.com/package/gulp-react

    作用：编译JSX文件至js文件

    
    

45. gulp-jade

    介绍：https://www.npmjs.com/package/gulp-jade

    作用：编译jade模板至html文件

    
    

46. gulp-jshint

    介绍：https://www.npmjs.com/package/gulp-jshint

    作用：对js代码进行风格检测

    
    

47. jshint-stylish

    介绍：https://www.npmjs.com/package/jshint-stylish

    作用：需配合jshint使用，作为报告器使用

    
    

48. gulp-mocha

    介绍：https://www.npmjs.com/package/gulp-mocha

    作用：测试工具