閱讀目錄

• 一、修改1：
• 二、　　修改2：
• 三、修改3：

閱讀目錄

• gulp解決RequireJS項目前端緩存問題（二）
• 前言
• 2、修改require.js
• 3、修改gulp-rev和gulp-rev-collector
• 4、測試
• 5、總結

前言

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

1. 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

修改完後，再刷新頁面，出現了“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) ) {

4、測試

運行gulp的五個命令

看下其中一個rev-manifest.json：

看下dist/html/index.html：

再看下頁面：

至此，第二點問題順利解決。剩下的就是把修改過require.js壓縮成min版本即可。

5、總結

總的來說，我們解決緩存問題采用的方式是通過修改參數來更新資源文件。

這兩節內容核心就如下幾個：

1. 通過gulp來生成需要替換的rev-manifest.json
2. 修改require.js源碼，以支持RequireJS引入的文件也能帶上參數
3. 修改gulp-rev和gulp-rev-collector，使得引用是以參數形式更新，而不是每次都是新文件更新

gulp解決RequireJS