在靜態(tài)資源版本管理方面题诵，以前用過兩種方案（都是通過后端實現(xiàn)） ：
第一種：獲取文件最新修改時間拷淘。可以實現(xiàn)比較好的版本管理效果茄猫，但客戶端每一次訪問一個資源文件，服務(wù)器都會動態(tài)讀取一次該文件的最新修改時間困肩。對這種方案划纽，頭腦有限，暫時無法評估其對性能和訪問速度的影響锌畸。但就版本管理效果來說勇劣，更傾向于這一種。
第二種：設(shè)置日期常量蹋绽。版本管理效果非常差芭毙。
目前已實現(xiàn)的新方案如下：
在構(gòu)建階段計算靜態(tài)資源的 hash 值筋蓖，并將該值以參數(shù)的形式追加到<link>、<script>中的 URL退敦。
大家需要知道的是粘咖，如果某個文件發(fā)生了修改，我這里會自動修改引用了該文件的各個模塊的view文件侈百。
此方案可實現(xiàn)真正的版本管理效果瓮下，并且可以確定對性能和訪問速度無影響。
1. 默認(rèn)方案：
如果使用gulp-rev + gulp-rev-collector钝域，默認(rèn)效果如下:
"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"
"cdn/image.gif" => "http://cdn8.example.dot/img/image-35c3af8134.gif"
但是如果用上面方法讽坏，實現(xiàn)的是非覆蓋式更新：即每次修改文件之后，生成帶新版本號的文件例证，但是帶舊版本號的文件不會被刪除路呜，長此以往，最后你會發(fā)現(xiàn)文件夾里累積了大量帶舊版本號的無用文件织咧。例如胀葱，style.css文件經(jīng)過三次更新之后，會累積一下三個文件：
style-a3654c03aa.css
style-98c5f098bd.css
style-6e4cfcf9de.css
2. 改良方案：
期望效果:
href="dist/css/style.css" => href="dist/css/style.css?v=1d87bebe"
src="dist/js/all.min.js" => src="dist/js/all.min.js?v=98c5f098bd"
src="dist/img/image.gif" => src="dist/img/image.gif?v=35c3af8134"
原理：
（1）gulp-rev根據(jù)文件內(nèi)容計算生成一個 hash 字符串笙蒙，如：98c5f098bd
（2）gulp-rev生成一個映射表抵屿，列出映射關(guān)系
{
"all.min.js": "all.min.js?v=98c5f098bd"
}
（3）gulp-rev-collector根據(jù)該映射表 將<link>、<script>URL中的文件名all.min.js替換為all.min.js?v=98c5f098bd
如何修改捅位？
需要對gulp-rev和gulp-rev-collector進(jìn)行修改轧葛。修改如下：
修改映射表中 屬性值的格式：
打開node_modules\gulp-rev\index.js
第133行 manifest[originalFile] = revisionedFile;
修改為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
修改生成文件的文件名（原來是將 hash 值加入到文件名中，現(xiàn)要文件名保持不變）：
打開node_modules\rev-path\index.js
第10行 return filename + '-' + hash + ext;
修改為: return filename + ext;
打開node_modules\gulp-rev-collector\index.js
第31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
修改為: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
避免引用 URL 中的版本號累積：dist/js/all.min.js?v=6e4cfcf9de => dist/js/all.min.js?v=54a62a8eb6?v=6e4cfcf9de
打開node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
修改為: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),
3. gulpfile.js 部分配置
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
gulp.task('css-rev', ['cleanCss'], function() {
console.log('開始--計算 css 資源版本號艇搀，并生成映射表...');
return gulp.src(['src/css/tmp/*.css'])
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest({
path: 'rev-manifest-css.json'
}))
.pipe(gulp.dest('src/rev'));
});
gulp.task('css', ['css-rev'], function() {
console.log('開始--修改 css 引用鏈接的資源版本號...');
return gulp.src(['src/rev/rev-manifest-css.json', 'views/**/*.php'])
.pipe(revCollector())
.pipe(gulp.dest('views'));
});
gulp.task('js-rev', ['js-move'], function() {
console.log('開始--計算 js 資源版本號佳簸，并生成映射表...');
return gulp.src(['dist/js/**/*.js'])
.pipe(rev())
// .pipe(gulp.dest('dist/js'))
.pipe(rev.manifest({
path: 'rev-manifest-js.json'
}))
.pipe(gulp.dest('src/rev'));
});
gulp.task('js', ['js-rev'], function() {
console.log('開始--修改 js 引用鏈接的資源版本號...');
return gulp.src(['src/rev/rev-manifest-js.json', 'views/**/*.php'])
.pipe(revCollector())
.pipe(gulp.dest('views'));
});
參考：
Gulp自動添加版本號
前端靜態(tài)資源版本更新與緩存之——通過gulp 在原h(huán)tml文件上自動化添加js涮坐、css版本號
