公司項(xiàng)目每次發(fā)布后，偶爾會有緩存問題乙埃，然后看了下gulp闸英，發(fā)現(xiàn)gulp還能給js，css自動(dòng)化添加版本號介袜，可解決緩存的問題甫何，所以自動(dòng)化實(shí)現(xiàn)靜態(tài)資源的版本更新才是正道。通過網(wǎng)上的資料試過了兩種辦法：
1.生成一個(gè)新的dist目錄遇伞，里面包含了要發(fā)布的html,js,css等文件 辙喂。
2.在原來的HTML文件上進(jìn)行js ,css版本的替換，不需要生成新的目錄文件鸠珠。
通過兩種方法的實(shí)踐過程對比巍耗，決定使用第二種辦法，所以這里介紹一下第二種方式的實(shí)現(xiàn)過程：
一.
1. 修改js和css文件
2. 通過對js,css文件內(nèi)容進(jìn)行hash運(yùn)算渐排，生成一個(gè)文件的唯一hash字符串(如果文件修改則hash號會發(fā)生變化)
3. 替換原h(huán)tml中的js,css文件名炬太，生成一個(gè)帶版本號的文件名
原結(jié)構(gòu)下html文件代碼：
<link rel="stylesheet" href="../css/style.css">
<script src="../js/index.js"></script>
要達(dá)到的效果：在原結(jié)構(gòu)下html文件代碼
<link rel="stylesheet" href="../css/style.css?v=0d83247610">
<script src="../js/index.js?v=61c1ef9f34"></script></br>
二.
1.作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝gulp和gulp插件：
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence
2.編寫gulpfile.js
//引入gulp和gulp插件
var gulp = require('gulp'),
runSequence = require('run-sequence'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector');
//定義css、js文件路徑驯耻，是本地css,js文件的路徑亲族，可自行配置
var cssUrl = 'css/*.css',
jsUrl = 'js/*.js';
//CSS生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revCss', function(){
return gulp.src(cssUrl)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'));
});
//js生成文件hash編碼并生成 rev-manifest.json文件名對照映射
gulp.task('revJs', function(){
return gulp.src(jsUrl)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'));
});
//Html更換css、js文件版本
gulp.task('revHtml', function () {
return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html']) /*WEB-INF/views是本地html文件的路徑可缚，可自行配置*/
.pipe(revCollector())
.pipe(gulp.dest('WEB-INF/views')); /*Html更換css孽水、js文件版本,WEB-INF/views也是和本地html文件的路徑一致*/
});
//開發(fā)構(gòu)建
gulp.task('dev', function (done) {
condition = false;
runSequence(
['revCss'],
['revJs'],
['revHtml'],
done);});
gulp.task('default', ['dev']);
三.更改gulp-rev和gulp-rev-collector(重要)
1.打開node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打開nodemodules\gulp-rev\nodemodules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新為: return filename + ext;
3.打開node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {</br>
四.執(zhí)行g(shù)ulp命令，得到的結(jié)果如下
<link rel="stylesheet" href="../css/style.css?v=0d83247610">
<script src="../js/index.js?v=61c1ef9f34"></script>
五.更改gulp-rev和gulp-rev-collector的原理
當(dāng)你完成第二步gulpfile.js的編寫城看，然后執(zhí)行g(shù)ulp后，你會發(fā)現(xiàn)效果如下:
//rev目錄下生成了manifest.json對應(yīng)文件
{ "style.css": "style-0d83247610.css"}
<link rel="stylesheet" href="../css/style-0d83247610.css">
<script src="../js/index-61c1ef9f34.js"></script>
這明顯沒有達(dá)到我們想要的效果杏慰，所以要按照第三步的要求更改代碼测柠！