gulp解決RequireJS項目前端緩存問題（二）

回到目錄

前言

這一節，我們主要解決在上一節《使用gulp解決RequireJSs項目前端緩存問題（一）》末尾提到的幾個問題：

1. 對通過require-config.js引入的js文件修改后，沒有更新到
2. 每次gulp運行完后都會生成新的文件，開發環境是做了清除dist目錄處理，但對於一般公司服務器而言，發布到生產環境上，不可能每次發布都對dist做清空處理，文件只會越積越多

先睹為快，猛戳鏈接下載Demo ：http://pan.baidu.com/s/1skDm2Up

回到目錄

2、修改require.js

按第一節中替換文件名的做法，要想在require-config.js中也能順利替換的話，應該在requireJs參數path對應的路徑文件加上后綴，如下圖：

2.1、把項目根目錄切換到src

運行html/index.html（注意為了調試方便，此時我們用的js是非壓縮版的require），這時控制台報錯：

RequireJS已經默認跟每個模塊自動加上了后綴，查看官方說明，你會發現這句話：“RequireJS默認假定所有的依賴資源都是js腳本，因此無需在module ID上再加".js"后綴，RequireJS在進行module ID到path的解析時會自動補上后綴”。

咋辦啊，我們必須邁過這個坎啊，莫怕，follow me，在錯誤的地方斷點調試：

你會看到node.src的值就是RequireJS動態插入的值，先按下圖紅色框部分插入代碼：

var srcArr = node.src.split('.js');
if(!!srcArr[1]){
    node.src=srcArr[0]+'.js'+srcArr[1]
}else{
    node.src=srcArr[0]+'.js'
}

大概意思就是如果有兩個“.js”，就取一個；我們最終要實現的是類似“.js?v=1.001”的格式，所以還要用srcArr[1]來保存參數。

修改完后，再刷新頁面，出現了“Good！成功加載index.js”，則表示第一個問題順利解決。

2.2、把項目根目錄切換到dist

運行上一節講到的五個gulp命令，運行html/index.html，查看控制台可以發現現在通過RequireJS引入的js也根據rev-manifest.json修改了引用：

至此，上一節遺留的第一點問題順利解決。

回到目錄

3、修改gulp-rev和gulp-rev-collector

到現在為止，gulp都是通過每次生成新文件來解決緩存的，而我們最終需要的是通過添加參數的方式來更新，解決這個問題，我們需要修改點文件。

返回頂部

修改1：

打開node_modules\gulp-rev\index.js，將第144行 manifest[originalFile] = revisionedFile; 更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;

返回頂部

　　修改2：

打開nodemodules\gulp-rev\nodemodules\rev-path\index.js，將10行 return filename + '-' + hash + ext; 更新為: return filename + ext;

返回頂部

修改3：

打開node_modules\gulp-rev-collector\index.js，將31行 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {