gulp解決RequireJS

標籤：==   .com   new   png   strong   伺服器   logs   split   開發   

閱讀目錄

• 一、修改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”的格式，所以還要用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) ) {

 

 

回到目錄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