gulp

在使用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

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

總結

以上是生活随笔為你收集整理的gulp+自动化编译html,gulp自动化构建html静态资源路径版本号添加和替换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。