小程序系列4-gulp常用插件

"del": "^4.1.1", // 删除文件及文件夹
"require-dir": "^1.2.0",  // 文件路径工具
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",  // 兼容规则给css添加浏览器前缀插件
"gulp-clean": "^0.4.0", // 删除文件或文件夹
"gulp-cli": "^2.2.0",
"gulp-cssnano": "^2.1.3",   // css优化
"gulp-if": "^2.0.2", // if条件判断
"gulp-json-format": "^2.0.0",
"gulp-less": "^4.0.1", // less优化
"gulp-postcss": "^8.0.0",  // css优化
"gulp-rename": "^1.4.0", // 文件改名
"gulp-tap": "^2.0.0",  // 进入pipe管道，可针对当前文档进行操作
"gulp-util": "^3.0.8", // 工具类 log等
"gulp-wechat-weapp-src-alisa": "^1.0.2",  // 支持别名@使用，精简路径
"postcss-px2units": "^0.2.0"  // 单位转换
"terser": "^4.6.11", // 压缩工具，支持ES6+语法
"through2": "^3.0.1",  // 对于node原生的transform流进行的封装

gulp常用插件汇总

gulp常用插件汇总：

browser-sync: 省时的浏览器同步测试工具,多设备、多屏幕自动刷新页面

http-proxy-middleware : 解决本地开发代理跨域请求插件

autoprefixer: 根据定制的兼容规则给css添加浏览器前缀插件

wiredep: wiredep解决了bower前端库引入进html中的问题

del: 删除文件及文件夹

yargs: Node中处理命令行参数的通用解决方案，只要一句代码 var args = require('yargs').argv;就可以让命令行的参数都放在变量args上，可以根据参数判断是测试环境还是正式环境。

gulp-load-plugins: 批量引入package.json文件中的依赖项

gulp-plumber: 防止因gulp插件的错误而导致管道中断，plumber可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。

gulp-notify:gulp通知插件

gulp-sourcemaps: 用来生成映射文件的一个插件，SourceMap 文件记录了一个存储源代码与编译代码对应位置映射的信息文件。我们在调试时都是没办法像调试源码般轻松，这就需要 SourceMap 帮助我们在控制台中转换成源码，从而进行 debug。

gulp-useref: 可以将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的所有文件进行合并。注意：它只负责合并，不负责压缩！

gulp-rev:为静态文件随机添加一串hash值, 解决cdn缓存问题, a.css --> a-d2f3f35d3.css。根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。

gulp-rev-collector:根据gulp-rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径。

gulp-rev-rewrite:重写对由gulp-rev修订的资产的引用

gulp-rev-css-url:用于在gulp-rev之后,用修订后的URL覆盖CSS文件中的URL

gulp-rev-outdated:旧的静态资产修订文件过滤器

gulp-rev-delete-original:删除由gulp-rev或 gulp-rev-all重写的原始文件 。

rev-del:这是一款从模块（如gulp-rev）生成的修订清单中删除旧的、未使用的指纹文件。

gulp-rev-format:提供静态资产的哈希格式选项（前缀，后缀，最后扩展名）

gulp-imagemin: 缩小PNG，JPEG，GIF和SVG图像的插件

gulp-cache:这是一款基于临时文件的gulp缓存代理任务。

gulp-filter: 可以把stream里的文件根据一定的规则进行筛选过滤。比如gulp.src中传入匹配符匹配了很多文件，可以把这些文件pipe给gulp-filter作二次筛选

gulp-inject:这个插件的作用与wiredep类似，不同的是可以自己任意指定需要插入文件的列表。它同样是利用注释来寻找插入的位置。

gulp-replace:gulp3的字符串替换插件

gulp-htmlmin:这是一款HTML文件压缩插件

gulp-if:这是一款条件判断插件

gulp-size:显示项目的大小插件

gulp-uglify:使用UglifyJS缩小js文件

gulp-beautify:这是一款使用js-beautify进行资产美化插件

pump:这是一款小型节点模块，可将流连接在一起并在其中一个关闭时将其全部销毁

gulp-postcss:通过多个插件通过管道传递CSS，但是仅解析一次CSS。

cssnano:这是一款将你的 CSS 文件做 多方面的的优化，以确保最终生成的文件 对生产环境来说体积是最小的插件

gulp-babel:Babel的Gulp插件

gulp-eslint:一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件。

modernizr:这是一款JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。

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](https://www.npmjs.com/package/gulp-util)

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

11. node-notifier

介绍：[https://www.npmjs.com/package/node-notifier](https://www.npmjs.com/package/node-notifier)

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

12. gulp-sftp

介绍：[https://www.npmjs.com/package/gulp-sftp](https://www.npmjs.com/package/gulp-sftp)

作用：FTP上传插件

13. gulp-tap

介绍：[https://www.npmjs.com/package/gulp-tap](https://www.npmjs.com/package/gulp-tap)

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

14. gulp-watch

介绍：[https://www.npmjs.com/package/gulp-watch](https://www.npmjs.com/package/gulp-watch)

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

15. stream-combiner2

介绍：[https://www.npmjs.com/package/stream-combiner2](https://www.npmjs.com/package/stream-combiner2)

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

16. gulp-changed

介绍：[https://www.npmjs.com/package/gulp-changed](https://www.npmjs.com/package/gulp-changed)

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

17. browser-sync

介绍：[https://www.npmjs.com/package/browser-sync](https://www.npmjs.com/package/browser-sync)

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

18. vinyl-paths

介绍：[https://www.npmjs.com/package/vinyl-paths](https://www.npmjs.com/package/vinyl-paths)

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

19. fs

介绍：[http://nodejs.cn/api/fs.html](http://nodejs.cn/api/fs.html)

作用：文件操作模块，即[Node.js](http://lib.csdn.net/base/nodejs "Node.js知识库")中的file system

20. glob

介绍：[https://www.npmjs.com/package/glob](https://www.npmjs.com/package/glob)

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

21. gulp-filter

介绍：[https://www.npmjs.com/package/gulp-filter](https://www.npmjs.com/package/gulp-filter)

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

22. gulp-rename

介绍：[https://www.npmjs.com/package/gulp-rename](https://www.npmjs.com/package/gulp-rename)

作用：重命名文件

23. gulp-cheerio

介绍：[https://www.npmjs.com/package/gulp-cheerio](https://www.npmjs.com/package/gulp-cheerio)

作用：可对HTML和XML文件进行DOM操作，类似[jQuery](http://lib.csdn.net/base/jquery "jQuery知识库")操作

24. gulp-dom-src

介绍：[https://www.npmjs.com/package/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](https://www.npmjs.com/package/gulp-md5-plus)

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

26. gulp-jsdoc3

介绍：[https://www.npmjs.com/package/gulp-jsdoc3](https://www.npmjs.com/package/gulp-jsdoc3)

作用：js自动生成文档

27. gulp-html-minifier

介绍：[https://www.npmjs.com/package/gulp-html-minifier](https://www.npmjs.com/package/gulp-html-minifier)

作用：HTML文档压缩

28. gulp-uglify

介绍：[https://www.npmjs.com/package/gulp-uglify](https://www.npmjs.com/package/gulp-uglify)

作用：JS文档压缩

29. gulp-clean-css

介绍：[https://www.npmjs.com/package/gulp-clean-css](https://www.npmjs.com/package/gulp-clean-css)

作用：CSS文档压缩

30. gulp-imagemin

介绍：[https://www.npmjs.com/package/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](https://www.npmjs.com/package/gulp-css-spriter)

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

32. gulp-css-base64

介绍：[https://www.npmjs.com/package/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](https://www.npmjs.com/package/gulp-useref)

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

34. gulp-concat

介绍：[https://www.npmjs.com/package/gulp-concat](https://www.npmjs.com/package/gulp-concat)

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

35. browserify

介绍：[https://www.npmjs.com/package/browserify](https://www.npmjs.com/package/browserify)

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

36. gulp-webpack

介绍：[https://www.npmjs.com/package/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](https://www.npmjs.com/package/gulp-seajs-combo)

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

38. amd-optimize

介绍：[https://www.npmjs.com/package/amd-optimize](https://www.npmjs.com/package/amd-optimize)

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

39. gulp-less

介绍：[https://www.npmjs.com/package/gulp-less](https://www.npmjs.com/package/gulp-less)

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

40. gulp-sass

介绍：[https://www.npmjs.com/package/gulp-sass](https://www.npmjs.com/package/gulp-sass)

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

41. gulp-stylus

介绍：[https://www.npmjs.com/package/gulp-stylus](https://www.npmjs.com/package/gulp-stylus)

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

42. gulp-coffee

介绍：[https://www.npmjs.com/gulp-coffee](https://www.npmjs.com/gulp-coffee)

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

43. gulp-babel

介绍：[https://www.npmjs.com/package/gulp-babel](https://www.npmjs.com/package/gulp-babel)

作用：可编译ES6至ES5，编译[React](http://lib.csdn.net/base/react "React知识库")的JSX变为createElement调用，编译后支持IE8以上普通浏览器

44. gulp-react

介绍：[https://www.npmjs.com/package/gulp-react](https://www.npmjs.com/package/gulp-react)

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

45. gulp-jade

介绍：[https://www.npmjs.com/package/gulp-jade](https://www.npmjs.com/package/gulp-jade)

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

46. gulp-jshint

介绍：[https://www.npmjs.com/package/gulp-jshint](https://www.npmjs.com/package/gulp-jshint)

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

47. jshint-stylish

介绍：[https://www.npmjs.com/package/jshint-stylish](https://www.npmjs.com/package/jshint-stylish)

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

48. gulp-mocha

介绍：[https://www.npmjs.com/package/gulp-mocha](https://www.npmjs.com/package/gulp-mocha)

作用：[测试](http://lib.csdn.net/base/softwaretest "软件测试知识库")工具