前端構建大法Gulp系列(一)：為什么需要前端構建_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 16:35:44

前端構建大法Gulp系列(一)：為什么需要前端構建_html/css_WEB-ITnose

前端構建大法Gulp系列(一)：為什么需要前端構建_html/css_WEB-ITnose:我們都知道使用IDE編寫后端程序時，我們都需要Build, 對.NET來說，我們一般需要使用Visual Studio來確保我們的項目編譯通過，而且項目編譯通過是對所有程序員的基本要求。但是，由于很多后端程序員對前端的很多東西不了解，導致在做WEB項目時出現了一些問

推薦度：

點擊下載本文 文檔為doc格式

導讀前端構建大法Gulp系列(一)：為什么需要前端構建_html/css_WEB-ITnose:我們都知道使用IDE編寫后端程序時，我們都需要Build, 對.NET來說，我們一般需要使用Visual Studio來確保我們的項目編譯通過，而且項目編譯通過是對所有程序員的基本要求。但是，由于很多后端程序員對前端的很多東西不了解，導致在做WEB項目時出現了一些問

我們都知道使用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, 里面的空格，換行這些都是為了讓我們讀代碼時更容易閱讀，但是對機器來說，這些對它沒有影響，所以為了減少文件大小，一般的情況我們都會用工具去掉空格和換行，有時候我們還會用比較短的變量名(記住這個要讓工具最后壓縮時做，而源代碼一定要保證命名可讀性) 來減少文件大小。

而所有的前端構建工具都具有文件合并和壓縮的功能。