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

閱讀目錄

• 1、修改1：
• 2、　　修改2：
• 3、修改3：

閱讀目錄

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

回到目錄

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

 

回到目錄

前言

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

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

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

 

回到目錄

二、修改require.js

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

 

2.一、把項目根目錄切換到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.二、把項目根目錄切換到dist

運行上一節講到的五個gulp命令，運行html/index.html，查看控制檯能夠發現如今經過RequireJS引入的js也根據rev-manifest.json修改了引用：

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

 

回到目錄

三、修改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) ) {

 

 

回到目錄

四、測試

 運行gulp的五個命令

 

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

 

 看下dist/html/index.html：

 

 再看下頁面：

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

 

回到目錄

五、總結

總的來講，咱們解決緩存問題採用的方式是經過修改參數來更新資源文件。

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

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