成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－－[BUILD]構(gòu)建工具思路梳理

wfc_666 / 1575人閱讀

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

前言 
之前也是從grunt/gulp/fis/過來的，到現(xiàn)在的webpack,中間有些問題沒怎么細(xì)想，比如明明是構(gòu)建工具為什么調(diào)試總是要開啟一個http服務(wù)之類的，現(xiàn)在就來簡單梳理下思路

最原始的構(gòu)建工具無非是這樣:

改動了某個資源文件， 要手動運(yùn)行構(gòu)建命令才能重新構(gòu)建，

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

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

而我們希望構(gòu)建工具最好是這樣:

你改動了某個資源文件，構(gòu)建工具能夠監(jiān)聽到這個變化，自動進(jìn)行重新構(gòu)建

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

構(gòu)建完成之后能夠自動刷新你的調(diào)試頁面(當(dāng)然如果能類似ajax無刷新加載就更好了)

核心功能輕量，通過plugin來拓展其他功能，比如編譯coffee/typescript/tpl/sass等

實(shí)現(xiàn)原理 資源文件修改自動編譯

監(jiān)聽資源的修改實(shí)現(xiàn)自動編譯是構(gòu)建工具要實(shí)現(xiàn)的基本功能，其原理是
node有api能夠可以監(jiān)聽單個資源文件的狀態(tài)(fs.watch)，當(dāng)資源文件發(fā)生變化，能夠觸發(fā)回調(diào)通知node, 這也是許多基于node的構(gòu)建工具實(shí)現(xiàn)核心. 當(dāng)然強(qiáng)大的node社區(qū)還出了監(jiān)聽文件夾的node模塊比如Chokidar

按需構(gòu)建資源文件

構(gòu)建工具監(jiān)聽到了某個資源文件的變化，重新構(gòu)建一遍這個資源文件,然后在最后打包的階段和其他沒有變化的之前已經(jīng)構(gòu)建好的資源文件合在一起重新打包成aio(all in one)

構(gòu)建工具監(jiān)聽到了某個資源文件的變化，重新構(gòu)建一遍這個資源文件,然后在之前構(gòu)建的aio中抽離出這個資源文件變化前的邏輯，填入變化后的邏輯, 連一塊打包都省了,不過實(shí)現(xiàn)起來邏輯比較復(fù)雜.

頁面自動加載新資源以方便調(diào)試

要實(shí)現(xiàn)這種功能，一般要在本機(jī)建立一個簡單的http server，構(gòu)建工具構(gòu)建完成之后將文件整個放置在server目錄.

并且在開發(fā)環(huán)境(dev)中，構(gòu)建工具構(gòu)建出來的最終的頁面文件除了你的業(yè)務(wù)代碼，一般還會引入一段socket的相關(guān)代碼，通過socket使得client能夠一直和server保持通信.比如你構(gòu)建完成之后，通過127.0.0.1:port/index.html調(diào)試頁面，你這個index.html中嵌入了了socket的代碼(當(dāng)然，生產(chǎn)環(huán)境(prod)不會把socket的功能打包進(jìn)去的)

有了socket使得服務(wù)端和客戶端保持通信連接，服務(wù)器推動客戶端刷新就很容易實(shí)現(xiàn)了. 處理方式有兩種，同步刷新和異步熱加載

如果服務(wù)器資源發(fā)生了變化，服務(wù)器會通過socket來向客戶端發(fā)送指令，客戶端socket捕獲到這條指令，就刷新頁面來重載新的資源.

如果服務(wù)器發(fā)生了變化，服務(wù)器會通過socket來向客戶端發(fā)送指令，客戶端socket捕獲到這條指令，異步向服務(wù)器拉去新的資源，來實(shí)現(xiàn)無刷新異步重載.

通過plugin來拓展其他功能

絕大多數(shù)構(gòu)建工具都是通過插件拓展的，就不說了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80870.html

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－－[BUILD]構(gòu)建工具思路梳理

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

    elina 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[BUILD] webpack體驗(yàn)記錄

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

    ZHAO_ 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[BUILD] webpack體驗(yàn)記錄

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

    ralap 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－梳理Jquery API

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

    warnerwu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<