zmNgFrameWork 架構升級ng1.5和md5靜態資源緩存方案【angular1.x】

前言：

　　在我前面的博客，angular項目總結——angular + browserify + gulp + bower + less 架構分享  把我開發angular的架構進行了分享，並上傳到了github  https://github.com/zimv/zmNgFrameWork 。

然後我又在個人 gulp系列 裏分享了 gulp-rev：項目部署緩存解決方案----gulp系列（六) ，也更新了github上gulpStart的rev分支 https://github.com/zimv/gulpStart， rev 分支 。

 

　　最近我在更新這個項目，把angular1.4.7更新到了1.5.5，關於angular的升級，我想說性能方面有提高，載入速度和流暢度都獲得了提高。

比較坑的一點，我彷佛安裝錯包了，以前的路由hash是用#，升級以後變成了#!，甚至控制檯會報一些不影響任何功能的錯誤。

我打開angular.min.js，發現裏面version顯示的是 1.5.5-build.4567。因而我又從新bower安裝了1.5.5，

版本註釋信息才變成了version:1.5.5。這個時候路由hash纔是正常的#，以前的報錯也不存在了。

 

　　畢竟仍是1.x，升級以後並無須要修改代碼什麼的，api是兼容的。關於升級1.5.5就說到這裏。

　　升級後，我把zmNgFrameWork 分爲三個分支1.4.7、1.5.5 、1.5.5&md5-cache。若是須要md5方案，能夠用1.5.5&md50cache這個分支。

 

md5方案:

　　md5的緩存部署是如今比較合適和流行的解決方案。根據目前項目和架構，我以爲能夠在zmNgFrameWork引入此項配置。

項目中的構建工具，我使用的是gulp，gulp-rev就是解決當前問題的插件。

gulp-rev的基本用法這裏我就不作過多介紹，須要瞭解的能夠先看這篇文章 gulp-rev：項目部署緩存解決方案----gulp系列（六) 。

　　

　　升級前，再囉嗦一下，咱們最終須要達到什麼效果（如下截圖使用gulpStart裏的實例）：

　　

如圖能夠看出

最終build的css和js後綴都帶有md5簽名，rev.json是存儲文件名路徑的。（咱們把這一步驟叫作 ① ）

最終html裏的文件名路徑要和build同步（咱們把這一步驟叫作 ② ）

要實現一鍵gulp就把這一切事情作好，就須要咱們來配置它：

 

配置less：

　　(1) 首先仍是在zmNgFrameWork npm安裝依賴gulp插件：

npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector

　　gulp-rev 來實現 步驟 ①

　　gulp-rev-collector 實現 步驟 ②

 

　　(2)先配置gulp的css任務，打開less.js

 

require gulp-rev，並加入方框內的代碼。

A 執行在gulp.dest以前，這樣輸出的文件將會帶上md5簽名，

B 執行在gulp.dest以後，這樣將會輸出存儲文件名路徑的rev.json到指定文件夾，

如此一來 步驟 ① 就完成了

  

 

　　(3) 新建rev-collector任務，配置好revJson的文件夾路徑和html路徑，執行這個任務的時候，gulp會找到全部rev.json，與html裏的路徑匹配，最終就完成了 步驟 ②

 

　　對，這篇文章不是教你們怎麼使用gulp-rev的~ 以上只是簡單介紹配置less並大體回顧一下。

 

回顧：

　　咱們再來回顧一下，zmNgFrameWork 的架構：

　　

　　（1）單頁面應用，目前只有一個入口，根目錄的index.html

　　（2）src：

　　　　common 包含主要的less（三方庫、抽象層和通用樣式)，全部圖片，和一部分js工具

　　　　modules 全部模塊，模塊層的less樣式，模塊的template，模塊的控制器、服務和指令

　　　　主模塊app.js 將會依賴注入全部 modules 文件夾的子模塊

　　(3) build：

　　　　全部圖片會被打包到build->common->img，全部css樣式最終打包爲一個css，被index引用

　　　　模塊的全部控制器、服務和指令打包爲一個js，被index引用

　　　　主模塊app.js，被index引用

 

繼續配置：

　　配置md5緩存部署方案，將會讓build裏全部js和css加上md5簽名，而且更新到index.html中。

根據以前的配置，css已經Ok了，以下圖：

　　gulp的時候新建了一個臨時輸出文件build：temp-build，最開始我實際上是直接把rev文件夾放在build文件夾裏的，

後來以爲build裏面的全部文件都應該是用來部署的靜態資源，不須要這些預編譯的臨時文件。

因此就建立了temp-build做爲預編譯文件的臨時存儲。

 

　　作到這一步其實還算順利，然後我開始配置js的md5。

在配置過程當中，按照以前的寫法，我發現gulp會出現報錯。

　　報錯的意思是當前管道流不支持。我想這是gulp-rev 不兼容browserify的管道的緣由。

然後我用一個新任務rev-js，把browserify打包好的js，載入到gulp管道，再執行一次輸入輸出，就能成功生成md5簽名了。

可是這個時候build裏面會變成這樣：

build裏面會存在browserify執行後的無簽名的js和md5簽名的js。

不該該在build裏面有預編譯文件，因而也一樣把browserify生成的js放到臨時文件夾裏去。

好了 一切OK。如今 步驟 ① 所有完成。

　　最後再執行一次rev-collector任務，把 步驟 ①  生成的rev.json和index.html進行匹配

 

 

如今 步驟 ② 所有完成。

 

曲折：

　　看起來很簡單嘛~可是過程還有有點曲折。

特別有一件曲折的事情，我已經同步處理了gulp任務執行順序，使用gulp-sync

 

rev-js要操做browserify生成的文件，因此要執行在browserify以後，下圖是cmd下gulp執行的日誌：

rev-js確實是執行在browserify以後，可是我發現rev-js並無輸出任何東西。

當我執行完gulp default以後，rev-js像是沒有運行同樣，什麼也沒輸出。

然後我再單獨運行一下rev-js任務，這個時候就有輸出了（由於這個時候browserify已經徹底執行完畢）！

 

　　後來糾結了好久，又遇到了各類狀況，又發生了各類猜想和驗證明驗。最終的結論確是：

gulp-aync沒法獲取browserify的管道，也沒法得知它的任務是否完成。之因此gulp日誌裏面顯示的是完成，不過是gulp默認的處理而已。

然後，我給rev-js任務加上了延遲，rev-js延遲以後，還須要給rec-collector延遲，rev-collector依賴rev-js。這樣才勉強能完成工做。

暫時沒有想到更好的辦法了。加上延遲以後，gulp-aync沒法正確判斷它是否完成了任務，因此也會默認處理爲完成。

不過這裏這樣使用暫時不會形成其餘問題，這種處理方式實在不優雅。

固然我也想過在browserify任務裏，添加監聽事件，可是根據目前裏面的邏輯，我以爲最好不要那麼作。

若是能使node的pipe同步就行了，能夠嗎？好像不行~求大牛指點！！

 

小結：

　　架構調整和升級是一件有風險，又很是有意思的事情。而最終的目的仍是適應業務、提高效率、解決問題。

 

　　最後奉上zmNgFrameWork 運行後的樣子，兩個測試頁面：

 

 

gulp問題已經解決：

　　browserify同步問題已經獲得解決，由下面評論的 @心成 解決的。如他所說，我確實沒有返回數據流，through2也幫我解決了browserify循環bundle的問題，總之很是感謝。

然後我還得知，他一年前gulp入門是看我博客入門的，而現在他已經幫我解決了問題了。得多向他學習。。本身都落後了~

　　調整以後build目錄有所改變，以前重命名app.js爲文件名：test/test.js ,如今不重命名: test/app.js 。

　　browserify管道流不被rev支持也解決了， 引入vinyl-buffer，在browserify任務後buffer()一下，詳情見最新的git