gulp常用插件（2）
最后更新于：2022-04-02 05:32:11
[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,配置使用代理机完成访问调试
';