起因
瀏覽器的緩存機制邻眷，導致web項目的靜態(tài)資源不能及時獲取鹅巍。目前最優(yōu)解決方案是：基于文件內(nèi)容的hash版本冗余機制。
我們希望開發(fā)的時候靜態(tài)資源是醬紫的：
<link href="css/style.css" rel="stylesheet">
上線時词爬，靜態(tài)資源是醬紫的：
<link href="css/style_4cbfcb.css" rel="stylesheet">
試試
查找資料秃嗜，兩種辦法比較科學，如下：
1.一步到位型
使用gulp-md5-plus（常規(guī)方法gulp-rev顿膨、gulp-rev-collerctor也可以做到一樣的效果锅锨，不過不推薦）
npm install --save-dev gulp-md5-plus
gulp文件中配置
var md5 = require("gulp-md5-plus");
打包的時候，移動css的代碼中加上一段
//config是配置的靜態(tài)資源路徑
gulp.task('pack:css', function() {
return gulp.src(config.pack.css.src)
.pipe(minifyCSS())
.pipe(md5(6,config.pack.html.src)) //css增加md5版本號恋沃，6位
.pipe(gulp.dest(config.pack.css.dest));
});
于是自動給靜態(tài)資源加md5版本號橡类，且自動替換頁面中的路徑。
<link href="css/style_4cbfcb.css" rel="stylesheet">
這種做法有以下的好處：
- 線上的文件不是同名文件覆蓋芽唇，而是文件名+hash的冗余顾画，所以可以先上線靜態(tài)資源，再上線頁面匆笤，不存在間隙問題研侣。
- 遇到版本回滾問題，只需要回滾頁面炮捧，無需回滾靜態(tài)資源庶诡。
- 由于靜態(tài)資源版本號是文件內(nèi)容的hash，因此所有靜態(tài)資源可以開啟永久強緩存咆课，只有更新了內(nèi)容文件才會緩存失效末誓，緩存利用率大增扯俱。
- 修改靜態(tài)資源會在線上產(chǎn)生新的文件，一個文件對應一個版本喇澡，不會受到構(gòu)造CDN緩存形式的攻擊迅栅。
1.hack插件方法
有些時候，我們需要的是下邊的情況
<link href="css/style.css" rel="stylesheet">
=>> <link href="css/style.css?v=4cbfcb" rel="stylesheet">
如果這樣的話晴玖，上邊提到的gulp-md5-plus读存，以及常規(guī)方法gulp-rev、gulp-rev-collerctor都無法使用了呕屎。
不過需要hack一下让簿，gulp-rev、gulp-rev-collerctor秀睛，可以達成這個效果尔当。
//安裝對應版本的插件
npm install --save-dev gulp-rev@5.1.0
npm install --save-dev gulp-rev-collector@1.0.0
第一步，打開node_modules\gulp-rev\index.js
第135行 manifest[originalFile] = revisionedFile;
更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;
第二步蹂安，打開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) ) {
正常使用gulp-rev和gulp-rev-collector，得到的效果就是
<link href="css/style.css" rel="stylesheet">
=>> <link href="css/style.css?v=4cbfcb32" rel="stylesheet">
這種方案使用的插件版本分別是
"gulp-rev": "^5.1.0",
"gulp-rev-collector": "^1.0.0",
如果npm install的是最新的插件藤抡，代碼位置需要調(diào)整侠碧，根據(jù)版本不一樣，改法是不一致的缠黍，不推薦大家使用這種方法弄兜，除非專門改一個放在npm上，否則不利于團隊協(xié)作瓷式。
參考文檔
靜態(tài)資源緩存與更新：https://my.oschina.net/jathon/blog/404968
gulp-md5-plus：https://www.npmjs.com/package/gulp-md5-plus
gulp-rev：https://www.npmjs.com/package/gulp-rev
