前端構建大法 Gulp 系列 (一)：爲何須要前端構建

系列目錄

• 前端構建大法 Gulp 系列 (一)：爲何須要前端構建

• 前端構建大法 Gulp 系列 (二)：爲何選擇gulp

• 前端構建大法 Gulp 系列 (三)：gulp的4個API 讓你成爲gulp專家

• 前端構建大法 Gulp 系列 (四)：gulp實戰

咱們都知道使用IDE編寫後端程序時，咱們都須要Build, 對.NET來講，咱們通常須要使用Visual Studio來確保咱們的項目編譯經過，並且項目編譯經過是對全部程序員的基本要求。

可是，因爲不少後端程序員對前端的不少東西不瞭解，致使在作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這個神器來一一解決咱們上面提到的問題。