各種前端build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch…… 前端目前有很多很多名詞，看著這些感覺永遠也學不完。 不要被這些名詞嚇唬住，這些工具出現的目的是讓我們的工作更加簡單。

快速掌握build工具祕訣

快速掌握這些工具，抓住幾個核心概念：

幫助你安裝
幫助你做事

當你接觸到一個新的開發工具的時候，你首先需要搞清楚一個東西：“這個工具的目的是幫我安裝東西，還是幫我做事？”

安裝類的工具

npm、Bower和Yeoman幾乎什麼東西都能裝，它們可以用來安裝前端庫，例如Angular.js或是React.js。它們還可以為你的開發環境安裝伺服器。它們可以安裝測試庫。它們甚至可以幫你安裝其他的前端開發工具。

做事類的工具

Grunt、Webpack、Require.js、Brunchu和Gulp則更加複雜一點。這類工具的目標，是在web開發中幫你完成自動化。有的時候，這類工具所做的事情，被稱為“任務（task）”

為了完成這些任務，這類工具經常需要自己的包和外掛生態。每一個工具都會使用不同的方式來完成任務。這些工具所做的事情也不盡相同。一些工具，擅長處理那些你所指定的任務，例如Grunt和Gulp等工具。還有一些工具，只只專注於一件事情，例如處理JavaScript的依賴，例如Browserify和Require.js等工具。

build工具的“祖宗”是Node和npm

Node和npm負責安裝和執行所有這些工具，因此你的所有專案中都會有它們的身影。由於這個原因，很多開發者在安裝新的工具之前，都會盡可能的嘗試使用這兩個工具解決問題。

它們兩個一個負責安裝，一個負責幫你做事情。

• Node是做事工具
• npm則是安裝工具
  npm可以安裝Angular.js和React.js等庫。它還可以安裝伺服器，讓你的應用在開發階段可以在本地執行。它還可以安裝很多其他工具，幫你完成很多事情，例如簡化程式碼。

而Node，則是幫你完成事情的，例如執行JavaScript檔案，以及伺服器等。

如果你剛剛開始學習，那麼Node和npm都是必學的東西。隨著你的專案不斷豐富，你將會逐漸知道這兩個工具的極限能力。當它們無法滿足你的需要的時候，就是你需要開始安裝其他工具的時候了。

build其實就是production-ready版本的應用

開發者經常會把JavaScript和CSS拆分成獨立的檔案。

獨立檔案的好處，是讓你可以專注於編寫針對性較強的程式碼，讓每一部分程式碼只針對一個問題，以免日後程式碼多到讓你自己都難以管理。但是當你的應用準備好被推向市場的時候，專案記憶體在多個JavaScript或是CSS檔案並不是一個好主意。當用戶訪問你的網站的時候，每一個檔案都需要獨立的HTTP請求，這會讓站點載入速度下降。

解決方法就是，給專案建立“build”，它要將所有CSS檔案合併成一個檔案，然後再合併JavaScript檔案。這樣一來，你就可以將檔案完成最小化。要想建立這個build，你需要使用build工具。

“最正確工具組合”這麼個東西不存在

使用哪些工具，完全是你自己說了算的事情。

你也可以選擇什麼工具都不用。但是要記住，隨著專案的發展，複製、黏貼、整合、開啟伺服器等事情會讓你慢慢手忙腳亂起來。

你也可以只使用Node和npm，其他工具一概不用。對於新手來說，這種方式很好，但是和上一條一樣，慢慢你會開始感到力不從心。

或者，除了Node和npm之外，你也可以使用少數幾個其他工具。那麼，你的開發過程將會以Node和npm為核心，然後搭配Grunt和Bower，或是Webpack或是Gulp和Bower。

使用正確的工具，能夠幫你將很多繁瑣的事情實現自動化。但是使用工具的代價，就是你需要付出學習成本。

build工具學習成本較高，因此你只需要學習你用的上的工具

專案開發本身就已經很複雜了，你可能要使用新的語言或是框架。你可能需要應付複雜的業務邏輯。而引入新的工具，只會讓你的學習成本變得更高。

對此，我的建議是，只學習那些你用的上的工具，其他的就先緩一緩吧。

學習任何一種新東西，最好的方式就是進行實踐。例如，不要為了學習Grunt而去學習，你可以在你的專案中去嘗試運用。