使用gulp為專案中的檔案自動新增版本號之實踐思路

2021-07-24 07:31:07 字數 2111 閱讀 1943

需要用到的gulp外掛程式:

1、gulp-rev

2、gulp-rev-format

3、gulp-rev-replace

要實現html中增加版本號的效果:

把gulp-rev的配置**貼上出來,gulp-rev幫我們生成乙個版本清單檔案:rev-manifest.json(這個檔名和路徑都是可以在配置裡修改的哦!在這裡我們外掛程式給我們提供的檔名)

// 生成版本號清單

gulp.task('rev', () => ))

.pipe($.rev.manifest())

});

$.rev():是蒐集/public下所有的靜態資源檔案;

$.revformat():修改清單檔案裡的版本格式;

修改清單檔案的版本號前**片段:

修改清單檔案的版本號後**片段:

增了$.revformat()之後,在清單檔案裡增加了「.cache」字串,他有什麼用呢?

版本清單生成了,接下就是替換檔案中的版本號;

// 刪除原來的版本

$.revreplace():是在版本號替換前和替換後都會有呼叫乙個函式,

使用$.revreplace()時我們要注意一下第一次替換版本號,和第二次替換版本號是不一樣的;

$.replace():的作用就是把第一次生成的版本號替換掉。舉例說明:

替換前的檔案 

第一次替換後的檔案 

第二次替換後的檔案

所以在替換版本號前先執行一下替換:$.replace(/(\.[a-z]+)\?(v=)?[^\'\"\&]*/g,"$1")

$.replace中包含了「(v=)?」的意思是:在原專案有一些增加了版本號的檔案,不像v=123456這種格式的,如:

所心(v=)?的意思就是匹配零次或一次;

$.replace中包含了「[^\'\"\&]」的意思是:匹配的檔案的結尾是以分號、逗號、&符為分割;如:

匹配到的是:js?123644

匹配到的是空字元

匹配到的是空字元

完整**把src和dest中的檔案路徑替換一下:

// 生成版本號清單

gulp自己專案中的完整配置,歡迎完善

vargulp require gulp varcssmin require gulp minify css css 壓縮varuglify require gulp uglify js 壓縮varconcat require gulp concat js 合併varimagemin require...

自動化構建專案中的檔案操作

讀寫檔案 fs pathvar fs require fs var path require path dirname 全域性變數,儲存的是檔案所在的檔案目錄 把乙個路徑或路徑片段的序列解析為乙個絕對路徑。讀檔案 var readfile fs.readfilesync path.resolve d...

專案中的檔案概述

1 擴充套件名為.csproj檔案 c 專案檔案的副檔名,它是 c sharpproject 的縮寫。net開發環境中建立專案時,會產生 csproj檔案,這是c 的工程檔案,其中記錄了與工程有關的相關資訊,例如包含的檔案,程式的版本,所生成的檔案的型別和位置的資訊等。也就是說乙個工程就乙個.csp...