前端構建工具

前端構建工具很讓人搞不清楚，即便是像我這樣的老司機也如此。咱們不只要理解這些工具作了什麼，還要搞明白怎麼將他們組合起來。

這篇文章講述了我是怎樣弄明白前端構建工具的。我不講代碼層面上，我主要講一些我腦海中這些工具是如何工做的，以及他們解決了什麼問題。

不要被技術嚇倒

Node,NPM,Grunt,Gulp,Bower,Webpack,Browserify,Yeoman,Brunch…，前端構建工具太多了，咱們不可能所有都學會。

關鍵是不要慌，要知道這些工具出現的目標就是讓你的工做變容易的。

想要理解這些工具是什麼、爲何會有這個工具，以及這些工具是怎麼用的，你只須要掌握幾個概念便可。

 

前端技術發展之快，各類能夠提升開發效率的新思想和框架層出不窮。可是它們都有一個共同點：源代碼沒法直接運行，必須經過轉換後才能夠正常運行。

構建就是作這件事情，將源代碼轉換成可執行的JavaScript、CSS、HTML代碼，包括以下內容。

代碼轉換：將TypeScript編譯成JavaScript、將SCSS編譯成CSS等。

文件優化：壓縮JavaScript、CSS、HTML代碼，壓縮合並圖片等。

代碼分割：提取多個頁面的公共代碼，提取首屏不須要執行部分的代碼讓其異步加載。

模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要經過構建功能將模塊分類合併成一個文件。

自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器。

代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。

自動發佈：更新代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

構建實際上是工程化、自動化思想在前端開發中的體現，將一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。構建爲前端開發注入了更大的活力，解放了咱們的生產力。

概念1 — 構建工具的核心功能無非就兩個：安裝 vs 作事情。

構建工具作兩件事：
安裝軟件包
作事情

當你遇到一個新的工具時，首先要問你本身的一句話就是：這個工具設計的目的是要幫我安裝工具包呢仍是要幫我作事情？

安裝包工具例如：npm、Bower，Yeoman能夠安裝幾乎全部的東西。他們能夠安裝前端框架，好比Angular.js或者React.js。他們能夠爲你的開發環境安裝服務器。他們能夠安裝測試框架。他們甚至幫你安裝其餘的前端構建工具。

 

 

簡單說就是，他們安裝了幾乎全部跟代碼相關的東西。

作事情的工具好比Grunt、Webpack、Require.js、Brunch和Grulp。這些工具備些複雜。
作事情的工具的目的就是自動化，它避免了前端開發中的煩雜事和一些易於犯錯的地方。

爲了作這些任務，他們常用他們本身生態鏈中的軟件包和插件。每一個工具都以不一樣的方式寫任務。這些工具也並不都是同樣的。一些「作」工具師徒處理你的任何任務（Grunt，Gulp等）。其餘的工具則專一於一件事情，好比處理Javascript中模塊依賴關係的（Browseriry、Require.js等）

有時候你會發現你在一個項目中使用了多個這樣的工具。

下面就是一些我用「作事情」工具自動化完成的一些任務：

1.替換一個文件中的文本字符串
2.建立一個目錄而後往這個目錄中移動一些文件
3.用一條命令執行單元測試
4.當我保存文件時刷新個人瀏覽器
5.把我全部的JavaScript文件打包成一個文件，把我全部的CSS文件合併成一個文件
6.壓縮個人Javascript文件以及個人CSS文件
7.修改網頁中的script標籤的位置

一旦你理解了一個工具是安裝軟件包仍是作事情的，把他們分門別類也就變得很簡單了：

 

 

概念2 — 全部構建工具的鼻祖是Node和npm

Node和npm安裝和運行全部的這些構建工具，因此你在項目中老是能夠看到他們。正因如此，許多開發者在他們安裝另外工具時都會屢次使用到這兩個工具。

Node和NPM也掉進了咱們的「作」和「安裝」二分法。Node就是作事情的工具，npm就是那個安裝工具。
Npm能夠安裝像Angular或者React.js這樣的框架。它也能夠給你的應用安裝一個服務器來方便你本地開發。它甚至能夠安裝一些工具來壓縮你的代碼。

Node，另外一方面他能夠作的事情還包括運行JavaScript文件，服務器等等。
若是你想開始學習構建工具，那就從Node+npm，好好學。當你的項目愈來愈大時，Node和npm的功能可能就到達了瓶頸，這時你能夠引入另外的構建工具來幫助你。

概念3 — 構建以後的文件僅僅就是一個準生產版本

開發者常常將JavaScript和css文件分爲多個文件。每個文件均可以讓你專一於寫某一個模塊的功能。這樣就能夠減小你閱讀代碼的認知負擔。（若是你以爲把文件分爲多個文件有點迷惑的話，你想一想假如你把一個文件寫成5000行時，你怎麼去讀呢，這是你就知道分散文件的好處了）

可是當你須要把你的應用上線時，多個JavaScript和CSS文件是不現實的。當用戶訪問你的網站時，每個js或者css文件都會發起一個新的http請求，這會讓你的網站加載起來很慢。

因此爲了改進這個問題，你能夠建立一個build文件，這個文件把全部的css文件合併到一塊兒，js文件也都合併到一個文件。這樣，你就減小了用戶請求的數量。爲了建立build文件，你就須要一個構建工具。

下面就是開發應用中的一個快照。注意它包含5個script標籤和3個link標籤了嗎？若是你看左側，注意到開發文件夾下有10個文件了嗎？

 

 

而後下面就是同一個應用構建完以後的代碼狀況。

注意到咱們只有一個script和一個link標籤了嗎？而後開發文件夾中只有4個文件了嗎，以前咱們但是有10個文件呢。

應用跟以前是如出一轍的，咱們只不過把他轉化成一個稱之爲構建以後的代碼小包。

 

 

你能夠想知道爲何須要構建呢，難道就是爲了節省用戶幾毫秒的時間嗎？好吧，若是你建立了屬於你或者幾我的的網站的話，你不須要有這些困擾。生成一個構建以後的應用只有在高訪問量的狀況下才有必要。（或者那些你以爲之後可能會被高訪問）

若是你正在學習開發或者僅僅在開發一個流量不怎麼高的網站的話，生成一個構建的應用可能不是頗有必要。

概念4 — 安裝和作之間的界限多是模糊的

沒有工具只作一件事情。他們都混雜着一個安裝和作。可是一般而言，一個工做傾向於作一件事多於另外一些事。

有時候一個安裝工具也會運行文件。npm就常常這麼作。npm能夠運行命令和腳本 — 不只僅是安裝文件而已。還有一個工具叫作Yeoman安裝構建以前的模板文件，可是它也會根據須要生成一些文件，模糊了安裝和作之間的界限。

概念5 — 沒有正好的工具組合。

工具之間的組合徹底取決於你。

你能夠選擇不用任何工具。但你要記住：像複製、粘貼、壓縮文件和啓動服務器等全部相關的事情會很快讓你崩潰的。

或者你能夠只用Node和npm。對初學者來講這就夠了，可是當你的項目愈來愈大時，你會發現某些須要手動的操做將會愈來愈多。

或者你能夠選擇使用一些其餘的基於Node和npm的工具。這樣的話就至關於Node+npm做爲你的應用核心，其餘的能夠是Grunt+Bower或者Webpack或者Gulp+Bower。

使用一些基於Node+npm的組合工具，可讓你的不少工做自動化。代價就是這些工具都有一個陡峭的學習曲線

 

 

概念6 — 構建工具備一個陡峭的學習曲線，因此只學那些必要的部分

開發應用已經很難了。你可能在使用多種編程語言或者多種框架。或者你可能還有一些讓人頭疼的業務邏輯。因此引入一個工具就至關與給你的項目多了一層複雜度。尤爲是那些別人使用構建工具生成的代碼。

個人建議就是隻學你須要的學的去完成你的工做，其餘的看都不要看。

學習新事物的最好方式就是你有一個現實的任務須要去完成。例如，不要去學習如何使用grunt複製文件，相反，只有當你的項目須要你去複製文件時，你再去學習它。
記住：過早的複雜性會拖慢你的腳步。

概念7 — 全部的構建工具都擁有一樣的目的：經過自動化那些須要手動完成的工做來讓你高興。

把構建工具用到最高境界的一個標識就是：當你保存好一個文件以後，或者你僅僅在終端敲了一行命令，大量的任務都會自動化幫你完成。

若是你的構建工具依然須要你手動移動文件，改變數值或者執行命令去下載一個新的構建工具時，你就尚未練成構建工具必殺技。

構架工具的一個最大的好處就是僅僅保存一個文件，你就能觸發一次自動的構建過程而且把最終的打包文件自動推送給你的瀏覽器。這能夠大大加快你的前端開發工做流程。

因此，你到底須要爲配置你的構建工做花費多少精力呢？很簡單：當你以爲他作的工做讓你happy時。

概念 #8 — 有時候不是你不夠聰明，而是文檔很糟糕。

我保證不是你。對於不少構建工具，文檔通常是不健全的。有時候就連最基本的功能都很難搞清楚怎麼去實現。

你須要記住的是對於構建工具來講，不多有預先定義好的構建工具組合。你會發現開發者們都經過不一樣的方式實現了一樣的結果 — 就好像有時候在stackoverflow上你會發現對於同一個問題有不少不一樣的答案。

這固然很使人煩惱，同時他也給你提供了一個機會去放鬆一下你的編碼思惟，而後去實現一些創造性的東西。

畢竟，這不就是爲何咱們作這個嗎？

做者：Plearner連接：https://www.jianshu.com/p/e290f9f53b7e來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。