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



转自: https://www.cnblogs.com/jiaoshou/p/12003709.html  

0 篇评论

发表我的评论