在使用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
修改之后再構建就能達到開始提到的效果了。
點擊鏈接下載修改后的文件http://pan.baidu.com/s/1boLRaWJ