1. 程式人生 > >Gulp教程之 Gulp能做什麼,前端裝逼為何要用它

Gulp教程之 Gulp能做什麼,前端裝逼為何要用它

               

我們先說說 平時web開發遇到的一些場景 和 苦惱無奈的情況:

JavaScript和CSS的版本問題

我們都知道 JavaScript和CSS屬於靜態檔案,如果地址不變,瀏覽器會快取這些檔案,那就意味著當我們需要改JavaScript或者CSS檔案的時候,即使我們後端改了,那麼客戶端也是看不到,這個在“JS一統天下”的時代是不可接受的,因為現在幾乎所有的WEB 程式都嚴重依賴JavaScript,而所有的網站都是需要使用CSS的。在我經歷過的專案即使是很多年經驗的程式設計師都出現過JavaScript和CSS檔案的版本問題,比如客戶讓修復一個Bug,這個Bug是JavaScript引起的,程式設計師修復了,或者是客戶說改一個背景顏色,可是當我們給客戶部署後或者程式碼交給客戶客戶部署時,客戶說Bug依然存在

,這個時候程式設計師經常說的話就會出現了 “我本地是好的呀”,最後再找來別人幫忙後,發現原來是沒有清除瀏覽器的快取,於是有的程式設計師就趕緊給客戶說:“你需要Ctrl+F5 清除瀏覽器的快取”。 每當我聽到這樣的話時就像關上燈留給我一屋子黑,首先,有幾個普通使用者會使用Ctrl+F5? 其次,有幾個使用者願意去Ctrl+F5?

那麼怎麼辦?我想很多程式設計師都知道加一個版本號就可以了,這樣瀏覽器就會認為是新的檔案,比如原來是 http://www.a.com/app.js 你現在只需要把地址改為http://www.a.com/app.js?v=1.0 即可

但是如果這個動作是手動的,那麼10次基本上至少有5次程式設計師會忘掉,那麼這就是為什麼我們需要前端構建

JavaScript和CSS的依賴問題

我們經常出現的另一個問題,就是JavaScript和CSS的依賴問題,說的通俗點就是JavaScript和CSS的在頁面中的順序問題!

我們經常發現CSS沒起作用,JavaScript的某個變數和方法找不到,有很多情況都是因為引入JavaScript或者CSS的順序不對,雖然我們可以使用一些RequireJS之類的模組管理,但是依然在很多情況下需要引入不同的檔案,尤其是CSS沒有一個好的模組化管理的元件。

那麼我們就需要有一個統一的地方來管理JavaScript和CSS的順序問題,而構建工具可以大大減少此類問題。

效能優化

我們都知道瀏覽器請求的檔案越多越耗時,請求的檔案越大越耗時,尤其是在我們現在很多使用前端MVC, MVVM框架的時候,我們為了前端程式碼更清晰,結構更合理,我們就由很多JS檔案,無疑又拖慢了網頁的速度。為了解決這個問題,因此我們需要做兩件事

檔案合併

瀏覽器需要下載多個JS檔案,而瀏覽器是有併發限制,也就是同時併發只能下載幾個檔案,假如瀏覽器併發數是5,你有20個JS檔案,而每5個需要2S, 那麼你光下載JS檔案都需要8S,那麼網頁的效能可想而知,所以我們需要合併多個檔案以減少檔案的數量。

檔案壓縮

我們知道檔案越大,下載越慢,而針對JavaScript和CSS, 裡面的空格,換行這些都是為了讓我們讀程式碼時更容易閱讀,但是對機器來說,這些對它沒有影響,所以為了減少檔案大小,一般的情況我們都會用工具去掉空格和換行,有時候我們還會用比較短的變數名(記住這個要讓工具最後壓縮時做,而原始碼一定要保證命名可讀性) 來減少檔案大小。

而所有的前端構建工具都具有檔案合併和壓縮的功能。

效率提升

Vendor字首

在CSS3使用越來越多的時候,我們都知道一些CSS的特性,不同的瀏覽器CSS有不同的字首,如果我們手工新增將會很繁瑣,而如果使用構建工具,很多構建工具可以自動給我新增CSS的Vendor字首

單元測試

JavaScript的單元測試在使用MVC或者MVVM的框架後,變得越來越容易,而單元測試是質量保證的一個很重要的手段,所以在提交之前,使用構建工具自動跑一遍我們的單元測試是非常重要的

程式碼分析

我們寫的JavaScript很多時候會有一些潛在的bug, 比如忘了新增分號,某個變數沒有等等,使用一些JavaScript的程式碼分析工具,可以很好的幫我們檢查一些常見的問題。

HTML引用JavaScript或者CSS檔案

比如我們需要使用Bower之類來引用前端JavaScript和CSS的第三方庫,那麼如果版本升級,新增移除等都用手工來修改HTML的話,第一比較耗時,第二比較容易疏漏,尤其是在我們需要切換Debug和production版本時將會有很多額外的工作,那麼使用前端構建工具可以很好的解決這些問題。

下篇更新 Gulp 的安裝 和使用

簡介:

gulp是前端開發過程中對程式碼進行構建的工具,是自動化專案的構建利器;她不僅能對網站資源進行優化,而且在開發過程中很多重複的任務能夠使用正確的工具自動完成;使用她,我們不僅可以很愉快的編寫程式碼,而且大大提高我們的工作效率。