gulp构建项目（十）：gulp

gulp构建项目（十）：gulp

需求分析：

• 浏览器会缓存js、css文件，所以在每次升级js或css文件之后，需要浏览器重新加载这些文件也就是我们常说的刷新缓存。
• 所以需要在js、css文件后面加上版本号。

一、版本号添加方式

本文将采用第二种方式就行讲解

1、改变文件名称

• 这种方式必须同时改变资源的文件名和html里面引用的文件名，并且一一对应
• 可以用 gulp-rev gulp-rev-collector 两个插件实现。
• 效果如下：

{"css/main.min.css" : "css/main-1d87bebe.min.css""js/main.min.js" : "js/main-61e0be79.min.js"
}

2、在文件后缀名之后通过添加 ?hash 实现

• 这种方式只需要给html里面引用的文件名添加版本号即可。只要版本号改变，浏览器就会认为它是该文件的某个版本，浏览器会重新加载这个文件：

<script src=”main.min.js?61e0be79”></script> 等价于 
<script src=”main.min.js”></script>

• 可以用 gulp-rev-dxb gulp-rev-collector-dxb 两个插件实现。
• 效果如下：

{"css/main.min.css" : "css/main.min.css?1d87bebe""js/main.min.js" : "js/main.min.js?61e0be79"
}

二、安装gulp-rev-dxb、gulp-rev-collector-dxb模块

npm i -D gulp-rev-dxb gulp-rev-collector-dxb

三、gulp-rev-dxb参数说明

1、rev()

给文件添加版本号

2、rev.manifest()

生成版本号清单文件

/**
* @param path {String} 生成文件的路径及文件名，如：rev/manifest.josn
* @param option
*/rev.manifest([path], [options])

四、gulp-rev-dxb配置使用

1、创建 rev 任务。因为不需要给 dist/ 下的文件添加版本号，所以 .pipe(rev()) 后面不需要写 .pipe(gulp.dest("./dist"))

var rev = require('gulp-rev-dxb');	// 生成版本号清单    // 生成版本号清单
gulp.task('rev', function() {return gulp.src(['./dist/js/**', './dist/css/**']).pipe(rev()).pipe(rev.manifest()).pipe(gulp.dest("./"));
});

2、添加到 build 任务。因为要依赖打包过后的文件 dist/ ，所以该任务要在资源文件打包完毕之后再执行

gulp.task('build', function(cb) {set_env('build');runSequence(['clean'],  // 首先清理文件，否则会把新打包的文件清掉['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行，提高效率['rev'], // 所有文件打包完毕之后开始生成版本清单文件cb);
});

3、执行gulp run build命令

五、gulp-rev-collector-dxb参数说明

/**
* @param options {Object}
* @placeReved {Boolean}
* @param options.dirReplacements {Object}
* @Map {Object} Default:
* 	{'.scss': '.css','.less': '.css','.jsx': '.js'}
*/revCollector([options])

六、gulp-rev-collector-dxb配置使用

1、创建 add_version 任务

var revCollector = require('gulp-rev-collector-dxb');   // 替换成版本号文件// 添加版本号（路径替换）
gulp.task('add_version', function() {return gulp.src(['./rev-manifest.json', './dist/*.html']).pipe(revCollector())   // 根据.json文件 执行文件内js/css名的替换.pipe(gulp.dest('./dist'));
});

2、添加到 build 任务。因为要依赖rev-manifest.json ，所以该任务要在 rev 之后再执行

gulp.task('build', function(cb) {set_env('build');runSequence(['clean'],  // 首先清理文件，否则会把新打包的文件清掉['html', 'js_libs', 'js_main', 'css_libs', 'css_main', 'images'], // 不分先后的任务最好并行执行，提高效率['rev'], // 所有文件打包完毕之后开始生成版本清单文件['add_version'], // 根据清单文件替换html里的资源文件cb);
});

3、执行gulp run build命令

.

项目地址（别忘了给星哦）

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题