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

elina 發布于2019-08-01 15:55 / 3378人閱讀

摘要：前言之前也是從過來的，到現在的中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個服務之類的，現在就來簡單梳理下思路最原始的構建工具無非是這樣改動了某個資源文件，要手動運行構建命令才能重新構建，重新構建的時候構建工具將所有資源

前言

之前也是從grunt/gulp/fis/過來的，到現在的webpack,中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個http服務之類的，現在就來簡單梳理下思路

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

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

重新構建的時候構建工具將所有資源文件重新構建一次，再合并打包.

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

而我們希望構建工具最好是這樣:

你改動了某個資源文件，構建工具能夠監聽到這個變化，自動進行重新構建

構建工具重新構建的時候并不會將所有的資源文件全部構建，而是將變化了的資源文件重新構建，再將這個變化了的資源文件和其他的資源文件合并打包

構建完成之后能夠自動刷新你的調試頁面(當然如果能類似ajax無刷新加載就更好了)

核心功能輕量，通過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來拓展其他功能

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

云服務器 GPU云服務器切圖崽 html5 切圖工具構建工具 android構建工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50209.html

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

摘要：前言之前也是從過來的，到現在的中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個服務之類的，現在就來簡單梳理下思路最原始的構建工具無非是這樣改動了某個資源文件，要手動運行構建命令才能重新構建，重新構建的時候構建工具將所有資源前言之前也是從grunt/gulp/fis/過來的，到現在的webpack,中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個h...

wfc_666 2019-08-20 12:14 評論0 收藏0
切圖崽的自我修養－[BUILD] webpack體驗記錄

摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構建思路，也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重 Webpack體驗記錄 webpack大法好退fis保平安打包工具前端工程化一直是前端的一塊重點.之前構建工具的選擇上，公司也是很早之前就從g...

ZHAO_ 2019-08-20 12:11 評論0 收藏0
切圖崽的自我修養－[BUILD] webpack體驗記錄

摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構建思路，也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重 Webpack體驗記錄 webpack大法好退fis保平安打包工具前端工程化一直是前端的一塊重點.之前構建工具的選擇上，公司也是很早之前就從g...

ralap 2019-08-01 15:56 評論0 收藏0
切圖崽的自我修養－梳理Jquery API

摘要：前言梳理一下中還不太熟悉的事件綁定統一用摒棄掉之前的解綁事件統一用語法糖，支持多個事件綁定同一個函數語法糖，支持多個事件綁定不同的函數語法糖，支持多個事件綁定不同的函數可以往里傳參可以給未創建的上綁定事件只能采取事件委托的形式所以寫成這樣是前言梳理一下Jquery中還不太熟悉的API Jquery事件綁定統一用on(摒棄掉之前的click,bind),解綁事件統一用off 語法...

warnerwu 2019-08-29 11:00 評論0 收藏0