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 特性。