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

AlenQi發表於2018-02-12
HTML

Foreword

在使用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_modules\gulp-rev\index.js

    • 第133行 manifest[originalFile] = revisionedFile;
    • 更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;

  3. 開啟node_modules\gulp-rev\node_modules\rev-path\index.js

    • 10行 return filename + '-' + hash + ext;
    • 更新為: return filename + ext;

  4. 開啟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) )

Tips:

  • 這三個檔案的路徑不是絕對的，比如rev-path這個資料夾也可能直接在node_modules\rev-path

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

  • 點選連結下載修改後的檔案pan.baidu.com/s/1c2vRIrY

相關文章