切圖崽的自我修養－－[BUILD]構建工具思路梳理

前言

以前也是從grunt/gulp/fis/過來的，到如今的webpack,中間有些問題沒怎麼細想，好比明明是構建工具爲何調試老是要開啓一個http服務之類的，如今就來簡單梳理下思路

最原始的構建工具無非是這樣:

1. 改動了某個資源文件， 要手動運行構建命令才能從新構建，

2. 從新構建的時候構建工具將全部資源文件從新構建一次，再合併打包.

3. 你要手動刷新頁面才能加載到到最新的構建完成的資源文件

而咱們但願構建工具最好是這樣:

1. 你改動了某個資源文件，構建工具可以監聽到這個變化，自動進行從新構建

2. 構建工具從新構建的時候並不會將全部的資源文件所有構建， 而是將變化了的資源文件從新構建，再將這個變化了的資源文件和其餘的資源文件合併打包

3. 構建完成以後可以自動刷新你的調試頁面(固然若是能相似ajax無刷新加載就更好了)

4. 核心功能輕量，經過plugin來拓展其餘功能，好比編譯coffee/typescript/tpl/sass等

---

實現原理

資源文件修改自動編譯

監聽資源的修改實現自動編譯是構建工具要實現的基本功能，其原理是
node有api可以能夠監聽單個資源文件的狀態(fs.watch)，當資源文件發生變化，可以觸發回調通知node, 這也是許多基於node的構建工具實現核心. 固然強大的node社區還出了監聽文件夾的node模塊好比Chokidar

---

按需構建資源文件

• 構建工具監聽到了某個資源文件的變化，從新構建一遍這個資源文件,而後在最後打包的階段和其餘沒有變化的以前已經構建好的資源文件合在一塊兒從新打包成aio(all in one)

• 構建工具監聽到了某個資源文件的變化，從新構建一遍這個資源文件,而後在以前構建的aio中抽離出這個資源文件變化前的邏輯，填入變化後的邏輯, 連一塊打包都省了,不過實現起來邏輯比較複雜.

---

頁面自動加載新資源以方便調試

要實現這種功能，通常要在本機創建一個簡單的http server，構建工具構建完成以後將文件整個放置在server目錄.

而且在開發環境(dev)中，構建工具構建出來的最終的頁面文件除了你的業務代碼，通常還會引入一段socket的相關代碼，經過socket使得client可以一直和server保持通訊.好比你構建完成以後，經過127.0.0.1:port/index.html調試頁面，你這個index.html中嵌入了了socket的代碼(固然，生產環境(prod)不會把socket的功能打包進去的)

有了socket使得服務端和客戶端保持通訊鏈接，服務器推進客戶端刷新就很容易實現了. 處理方式有兩種，同步刷新和異步熱加載

• 若是服務器資源發生了變化，服務器會經過socket來向客戶端發送指令，客戶端socket捕獲到這條指令，就刷新頁面來重載新的資源.

• 若是服務器發生了變化，服務器會經過socket來向客戶端發送指令，客戶端socket捕獲到這條指令，異步向服務器拉去新的資源，來實現無刷新異步重載.

---

經過plugin來拓展其餘功能

絕大多數構建工具都是經過插件拓展的，就不說了