在靜態資源版本管理方面，以前用過兩種方案（都是通過后端實現） ：
第一種：獲取文件最新修改時間。可以實現比較好的版本管理效果，但客戶端每一次訪問一個資源文件，服務器都會動態讀取一次該文件的最新修改時間。對這種方案，頭腦有限，暫時無法評估其對性能和訪問速度的影響。但就版本管理效果來說，更傾向于這一種。
第二種：設置日期常量。版本管理效果非常差。
目前已實現的新方案如下：
在構建階段計算靜態資源的 hash 值，并將該值以參數的形式追加到<link>、<script>中的 URL。
大家需要知道的是，如果某個文件發生了修改，我這里會自動修改引用了該文件的各個模塊的view文件。
此方案可實現真正的版本管理效果，并且可以確定對性能和訪問速度無影響。
1. 默認方案：
如果使用gulp-rev + gulp-rev-collector，默認效果如下:
"/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"
但是如果用上面方法，實現的是非覆蓋式更新：即每次修改文件之后，生成帶新版本號的文件，但是帶舊版本號的文件不會被刪除，長此以往，最后你會發現文件夾里累積了大量帶舊版本號的無用文件。例如，style.css文件經過三次更新之后，會累積一下三個文件：
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根據文件內容計算生成一個 hash 字符串，如：98c5f098bd
（2）gulp-rev生成一個映射表，列出映射關系
{
"all.min.js": "all.min.js?v=98c5f098bd"
}
（3）gulp-rev-collector根據該映射表 將<link>、<script>URL中的文件名all.min.js替換為all.min.js?v=98c5f098bd
如何修改？
需要對gulp-rev和gulp-rev-collector進行修改。修改如下：
修改映射表中 屬性值的格式：
打開node_modules\gulp-rev\index.js
第133行 manifest[originalFile] = revisionedFile;
修改為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
修改生成文件的文件名（原來是將 hash 值加入到文件名中，現要文件名保持不變）：
打開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自動添加版本號
前端靜態資源版本更新與緩存之——通過gulp 在原html文件上自動化添加js、css版本號
