回想最早年資源版本控制，是不是類似如下
<script src="a.js?t=20140404"></script>
<script src="a.js?v=1.1.0"></script>
這是一個最常見的古老的版本控制方式，簡單直觀易用，缺點就是我們常常會因為緩存因為覆蓋造成發(fā)布外網(wǎng)時出現(xiàn)資源同步問題。對于沒啥訪問量的小型站點折騰折騰也就過了，如果項目很大訪問很大，一但出現(xiàn)問題波及很廣你自然少不了被領(lǐng)導(dǎo)被上級抓去撿肥皂的命運(yùn)。
所以現(xiàn)在有了很多居于gulp或grunt的hash值生成靜態(tài)文件的工具，沒錯今天我要講的也是這個，但是會換點花樣和玩法。
最基本的rev玩法
<!-- build:js js/all.js -->
<script src="js/all.js"></script>
<!-- endbuild -->
通過定義build再在gulpfile.js做rev()配置，比如
return gulp.src("*.html")
.pipe(userefAssets) // Concatenate with gulp-useref
.pipe(jsFilter)
.pipe(uglify()) // Minify any javascript sources
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(csso()) // Minify any CSS sources
.pipe(cssFilter.restore())
.pipe(rev()) // Rename the concatenated files
.pipe(userefAssets.restore())
.pipe(useref())
.pipe(revReplace()) // Substitute in new filenames
.pipe(gulp.dest('dist'));
這樣就可以動態(tài)將build內(nèi)的css，js等文件合并壓縮并md5命名，但是這種做法的缺點也很明顯，寫法繁瑣，而且不支持特殊規(guī)則比如css內(nèi)部的background:url()，如果想要支持這種替換還得自己做插件做規(guī)則匹配。
于是就有了巧妙的利用manifest.json來幫助我們做更智能化的md5規(guī)則
gulp.task('ift-js', ['move-js'], function(){
return gulp.src('./dev/js/**')
.pipe(rev())
.pipe(gulp.dest('./dist/js/'))
.pipe(rev.manifest({path:'ift-js.json'}))
.pipe(gulp.dest('./dist/'));
通過這種形式我們使用主動式創(chuàng)建md5文件讓本地文件自然形成md5拷貝版同時生成了json對應(yīng)表
然后通過掃描全部資源文件，通過正則匹配確認(rèn)文件被使用的是原文件還是md5文件，如果使用的是原文件，系統(tǒng)自動刪除已生成的md5文件，如果使用了md5文件，系統(tǒng)自動刪除源文件，這種形式消除了冗余拷貝
return gulp.src(['./dist/css/**','./dist/js/**','./dist/*.html'],{base:'dist'})
.pipe(replace(/js/[S]*\?___md5/g,function(match){
return md5(match,'js/');
}))
.pipe(gulp.dest('./dist/'));
而這邊使用的規(guī)則避開了傳統(tǒng)的bulid注釋形式，因為我覺得這種寫法真的有些繁瑣了，所以這邊采用時間戳形式
于是就有了如下成果
調(diào)用方
<script src="/js/console.js"></script>
<script src="/js/plugin.js?___md5"></script>
<script src="/js/section.js?___md5"></script>
<script src="/js/index.js?___md5"></script>
開發(fā)目錄
dev/js
- console.js
- index.js
- plugin.js
- section.js
發(fā)布目錄
dist/js
- console.js
- index-a5fae3cd.js
- plugin-0ddc6bc0.js
- section-0c058d64.js
可以看到根據(jù)自能匹配規(guī)則，js目錄下有三個文件被自動md5，而調(diào)試文件因為沒有md5標(biāo)識保留了源文件拷貝。