gulp自動化構建html靜態資源路徑版本號添加和替換

在使用gulp自動添加版本號時稍作一點修改，歡迎指正。

出現的什麼問題？

我使用的是（gulp-rev + gulp-rev-collector），但是每次自動化構建都是依賴rev生成的json文件：

"style.css": "style-f048bfa0ab.css","script.js": "scrip-5c69cf6d54.js",

利用上面的json去修改html裡面的靜態路徑，第二次如果不想去刪除html，只想修改靜態資源的路徑，文件名被修改無法依賴。

最直接的方法就是修改插件，使rev生成的json文件變為下面的依賴關係：

"style.css": "style.css?v=f048bfa0ab","script.js": "scrip.js?v=5c69cf6d54",

這樣不會修改文件的名稱，依賴關係依然成立。每次輸出都能按照最新的依賴關係替換我們html文件的靜態資源路徑。

如何解決

1. 分別安裝gulp-rev、gulp-rev-collerctor
   npm install --save-dev gulp-rev

   npm install --save-dev gulp-rev-collector

2. 打開node_modulesgulp-revindex.js
   第133行 manifest[originalFile] = revisionedFile;
   更新為: manifest[originalFile] = originalFile + ?v= + file.revHash;
3. 打開node_modulesgulp-rev
   ode_modules
   ev-pathindex.js
   10行 return filename + - + hash + ext;
   更新為: return filename + ext;
4. 打開node_modulesgulp-rev-collectorindex.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) ) {

Tips:

這三個文件的路徑不是絕對的，比如rev-path這個文件夾也可能直接在node_modules
ev-path

修改之後再構建就能達到開始提到的效果了。

點擊鏈接下載修改後的文件https://pan.baidu.com/s/1c2vRIrY

推薦閱讀：