[TOC] ### 前言 本文将继续前面的gulp系列插件，介绍一些其他你可能用到插件， * 以下模块地址均为官网地址，如果觉得请求地址慢，可以访问淘宝镜像的包说明地址，http://npm.taobao.org/ * 以下模块介绍顺序不分先后，代码仅供参考，亲测可用。 * 所有的模块使用都需要require引入，如果下面代码有遗漏请自觉加入。 ### gulp-rev，gulp-rev-format，gulp-rev-replace * 模块地址：https://npm.taobao.org/package/gulp-rev * 安装 ``` bash $ npm install gulp-rev --save-dev ``` * 使用场景：对文件添加md5签名，对可以搭配使用，对匹配的所有的相关引用文件都追加md5签名 ~~~javascript var rev = require('gulp-rev'), revFormat = require('gulp-rev-format'), revReplace = require('gulp-rev-replace'); gulp.task('rev',function(){ gulp.src('src/*.css') .pipe(rev()) .pipe(revFormat({//文件重命名 suffix: '.min', lastExt: false })) .pipe(gulp.dest('dist/css'))//指定文件检出的位置 .pipe(rev.manifest() ) .pipe(gulp.dest('dist/'));//指定rev-mainfest.json生成的位置 }) // 批量替换页面中引入的链接 gulp.task('rev-replace',['rev'],function(){ var manifest=gulp.src(['dist/*.json']); function modifyUnreved(filename){ return filename; } function modifyReved(filename){ console.log(filename); if(filename.indexOf('.min')>-1){ const _md5= filename.match(/\-[\w]*\.min/)[0].replace(/(\-|.min)*/g,''); const _filename= filename.replace(/\-[\w]*/,''); filename =_filename + "?major=" + _md5; return filename; } return filename; } //参数说明：manifest,参考的文件替换原则modifyUnreved,没有转化前的名字，modifyReved//转化后的名字 gulp.src(['src/*.html'])//需要替换的页面 .pipe(revReplace({ manifest: manifest, modifyUnreved: modifyUnreved, modifyReved: modifyReved })) .pipe(gulp.dest('dist')); }) ~~~ ### gulp.spritesmith * 模块地址：https://npm.taobao.org/package/gulp.spritesmith * 安装 ``` bash $ npm install gulp.spritesmith --save-dev ``` * 使用场景：开发完成之后利用任务将若干的小图自动拼接形成雪碧图，供开发使用,方便简单，可以支持css\less\sass\stylus等多种格式 ~~~javascript var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { gulp.src('src/images/sprite1/*.*') .pipe(spritesmith({ imgName: 'sprite1.png', cssName: 'sprite1.css', padding: 10 })).pipe(gulp.dest('src/images/sprites')) }) ~~~ ### browser sync * 模块地址：https://npm.taobao.org/package/browser-sync * 可参考的模块完整配置：[browerSync](https://www.kancloud.cn/csnikey/fepro-guide/390364) * 安装 ``` bash $ npm install browser-sync --save-dev ``` * 使用场景：开发阶段保证开发与调试实时同步，可以实现同一地址多端同步显示 ~~~ var browserSync = require('browser-sync').create(); var reload=browserSync.reload(); gulp.task('server',function(){ browserSync.init({ server: { baseDir: './', }, index:'./src/demo.html', reloadDelay: 1000, files:'./src', port: 8090 }); gulp.watch('./src/**/*', reload); }) ~~~ * 常用配置 1.如果你不想每次启动都打开新页面，可以配置open：false，默认是true 自动每次打开浏览器窗口按照本地地址访问 2.配置指定的浏览器，如果你默认的浏览器不是你的开发浏览器，那么可以指定下browser：['google chrome','firefox'] 3.proxy,配置使用代理机完成访问调试