grunt-contrib-connect 中間件middleware屬性

說道這個屬性,簡直就是這個插件的神來之筆,這個屬性可擴展自己在本地的靜態文件服務器。用處太大了。

第一次接觸到這個屬性是因爲想搭一個可以按下ctrl+s之後瀏覽器自動刷新頁面的一個功能,在網上找了找,發現前輩們已經實現了這個功能,而這個技術的關鍵點就是通過middleware與長連接grunt-contrib-watch結合,實現靜態注入瀏覽器中打開的html長連接,非常實用,聽到這個功能還不錯的話可以到菜單中的grunt中找找。

好了,如正文了,我們這篇文章要實現一個類似於模板加載引擎的功能(將文件中的<!--HeadFragment><--><!--/HeadFragment><-->標籤之間添加上一些在head中項目文件可能共有的部分,類似於angularjs中的路由什麼的,或者是說jsp,php中的include,require功能)。而這個模板加載引擎的功能就的核心就是匹配讀文件修改文件後再會寫,不同於js中的ajax。

因爲這個只是本地的,所以根本不用考慮性能什麼的,因爲項目上線的時候不會用到這些項目管理的文件。

首先來看看我們的grunt.init中的connect任務中的配置:

如圖,middleware後面緊跟一個函數,這個函數會返回一個數組,在你請求當前服務器下的某個url時connect就會順序執行該數組中的函數。

說清楚middleware的值後讓我們來看看它的值是什麼鬼(這個我看文檔差點沒看明白,自己還是太弱)。

 

在這個數組中,首先我們創建一個自定義函數,我們自己需要的參數有connect中的配置option,當然,這個不是固定的模式,主要是看你項目的需要。之後return中的第一個函數就是實現上面說的功能的,具體的地方我可以講一下,

其中引用了三個參數時connect插件自帶的,   req 是正在請求的對象,eg:req.url返回當前服務器請求的url,res是請求的響應,next指向中間件函數隊列中的下一個需要執行的函數,在這裏next所指代的就是lrSnippet,在myMiddleware中就是我所說的讀文件,替換,寫文件,實現覆蓋,具體的都在代碼中了,也不復雜,有些函數不懂得話 可以去grunt官網上file操作中看看,挺基礎的。然後將自己註冊的任務起一下就可以實現我所說的模板引擎了。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章