茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

回想最早年資源版本控制，是不是類似如下

<script src="a.js?t=20140404"></script>

<script src="a.js?v=1.1.0"></script>

這是一個(gè)最常見(jiàn)的古老的版本控制方式，簡(jiǎn)單直觀易用，缺點(diǎn)就是我們常常會(huì)因?yàn)榫彺嬉驗(yàn)楦采w造成發(fā)布外網(wǎng)時(shí)出現(xiàn)資源同步問(wèn)題。對(duì)于沒(méi)啥訪問(wèn)量的小型站點(diǎn)折騰折騰也就過(guò)了，如果項(xiàng)目很大訪問(wèn)很大，一但出現(xiàn)問(wèn)題波及很廣你自然少不了被領(lǐng)導(dǎo)被上級(jí)抓去撿肥皂的命運(yùn)。

所以現(xiàn)在有了很多居于gulp或grunt的hash值生成靜態(tài)文件的工具，沒(méi)錯(cuò)今天我要講的也是這個(gè)，但是會(huì)換點(diǎn)花樣和玩法。

最基本的rev玩法

<!-- build:js js/all.js -->

<script src="js/all.js"></script>

<!-- endbuild -->

通過(guò)定義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'));

這樣就可以動(dòng)態(tài)將build內(nèi)的css，js等文件合并壓縮并md5命名，但是這種做法的缺點(diǎn)也很明顯，寫法繁瑣，而且不支持特殊規(guī)則比如css內(nèi)部的background:url()，如果想要支持這種替換還得自己做插件做規(guī)則匹配。

于是就有了巧妙的利用manifest.json來(lái)幫助我們做更智能化的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/'));

通過(guò)這種形式我們使用主動(dòng)式創(chuàng)建md5文件讓本地文件自然形成md5拷貝版同時(shí)生成了json對(duì)應(yīng)表

然后通過(guò)掃描全部資源文件，通過(guò)正則匹配確認(rèn)文件被使用的是原文件還是md5文件，如果使用的是原文件，系統(tǒng)自動(dòng)刪除已生成的md5文件，如果使用了md5文件，系統(tǒng)自動(dò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注釋形式，因?yàn)槲矣X(jué)得這種寫法真的有些繁瑣了，所以這邊采用時(shí)間戳形式

于是就有了如下成果

調(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目錄下有三個(gè)文件被自動(dòng)md5，而調(diào)試文件因?yàn)闆](méi)有md5標(biāo)識(shí)保留了源文件拷貝。

更多信息請(qǐng)查看IT技術(shù)專欄