即使對於一些經驗豐富的開發者來說，諸多的前端工具還是會讓他們感到頭痛，例如我。解決這個問題的最好辦法，就是在概念上理解他們的工作方式，已經他們之間相互配合的方式。
不要被各種專業名詞唬住
Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……諸多的名詞讓你一時間感到手足無措，好像根本學不完。
其實關鍵就是，不要被它們唬住。要知道，所有這些工具，其最初的設計目的，都是要讓你的工作變得更簡單。
要想弄明白這些工具是什麼、如何工作以及為何要使用它們，你其實只需要抓住少數幾個核心概念。
概念1：build工具的兩大核心功能，就是“安裝vs做事”
從本質上說，開發工具做的事情就兩個：
- 幫你安裝東西
- 幫你做事
當你接觸到一個新的開發工具的時候，你首先需要搞清楚一個東西：“這個工具的目的是幫我安裝東西，還是幫我做事？”
安裝類的工具，例如npm、Bower和Yeoman幾乎什麼東西都能裝，它們可以用來安裝前端庫，例如Angular.js或是React.js。它們還可以為你的開發環境安裝伺服器。它們可以安裝測試庫。它們甚至可以幫你安裝其他的前端開發工具。
簡而言之，任何你能想到的與程式碼有關的東西，它們都能安裝。
而幫你做事類的工具，例如Grunt、Webpack、Require.js、Brunchu和Gulp則更加複雜一點。這類工具的目標，是在web開發中幫你完成自動化。有的時候，這類工具所做的事情，被稱為“任務（task）”。
為了完成這些任務，這類工具經常需要自己的包和外掛生態。每一個工具都會使用不同的方式來完成任務。這些工具所做的事情也不盡相同。一些工具，擅長處理那些你所指定的任務，例如Grunt和Gulp等工具。還有一些工具，只只專注於一件事情，例如處理JavaScript的依賴，例如Browserify和Require.js等工具。
有的時候，你在一個專案之中可能需要使用多種工具。例如，我就曾在一個專案中使用了不同的工具來將下列任務進行自動化處理：
- 在一個檔案中替換文字字串
- 建立資料夾，並且將檔案轉移到這些資料夾中
- 用一條單一命令執行單元測試
- 在我儲存檔案的時候重新整理瀏覽器
- 所有JavaScript檔案整合為一個檔案，將所有CSS檔案整合為一個檔案
- 對所有JavaScript和CSS進行簡化處理
- 在html頁面中修改<script>標籤的位置
在你理解了前端工具分為安裝類工具和幫你做事的工具之後，你就可以輕鬆的對它們進行歸類：
概念2：build工具的“祖宗”是Node和npm
Node和npm負責安裝和執行所有這些工具，因此你的所有專案中都會有它們的身影。由於這個原因，很多開發者在安裝新的工具之前，都會盡可能的嘗試使用這兩個工具解決問題。
它們兩個一個負責安裝，一個負責幫你做事情。Node是做事工具，而npm則是安裝工具。
npm可以安裝Angular.js和React.js等庫。它還可以安裝伺服器，讓你的應用在開發階段可以在本地執行。它還可以安裝很多其他工具，幫你完成很多事情，例如簡化程式碼。
而Node，則是幫你完成事情的，例如執行JavaScript檔案，以及伺服器等。
如果你剛剛開始學習，那麼Node和npm都是必學的東西。隨著你的專案不斷豐富，你將會逐漸知道這兩個工具的極限能力。當它們無法滿足你的需要的時候，就是你需要開始安裝其他工具的時候了。
概念3：build其實就是production-ready版本的應用
開發者經常會把JavaScript和CSS拆分成獨立的檔案。
獨立檔案的好處，是讓你可以專注於編寫針對性較強的程式碼，讓每一部分程式碼只針對一個問題，以免日後程式碼多到讓你自己都難以管理。但是當你的應用準備好被推向市場的時候，專案記憶體在多個JavaScript或是CSS檔案並不是一個好主意。當使用者訪問你的網站的時候，每一個檔案都需要獨立的HTTP請求，這會讓站點載入速度下降。
解決方法就是，給專案建立“build”，它要將所有CSS檔案合併成一個檔案，然後再合併JavaScript檔案。這樣一來，你就可以將檔案完成最小化。要想建立這個build，你需要使用build工具。
下圖是一個開發階段的應用，注意到了嗎，裡面有5個<script>標籤和3個<link>標籤。看看左邊，裡面有的DEVELOPMENT資料夾中有10個檔案。
開發階段的應用
而下面這種圖，則是同一個應用，不過它現在已經處於了bulid階段。裡面的<srcipt>標籤和<link>標籤的數量都程式設計了一個。而DEVELOPMENT資料夾被PRODUCTION資料夾替代，裡面的檔案數量也從10個變成了4個。
應用程式碼其實並沒有變，我們只是把程式碼變得看上去更簡潔而已，這就是所謂的“build”。
build階段的應用
你可能會想，build這東西真的有必要嗎？它的作用不過是節省使用者幾毫秒的時間而已。如果你的站點只有你自己，或者身邊少數的幾個人在開，那麼你不用費勁的做build。但是如果你的站點或是應用有著較高的流量，那麼你就必須做build。
因此，如果你只是在學習開發的階段，或者你的站點流量較低，你沒有必要花時間和精力去生成build。
念4：“安裝”和“做事”之間的界限有時會模糊
沒有工具只能做一件事情，而無法做另一件事情。所有工具都是“安裝”和“做事”的結合體。但是一般來說，一個工具會有自己的強項，或是強於安裝，或是強於做事。
有的時候，一個安裝類工具也能執行檔案。npm就是這樣，它也能執行命令和指令碼，不僅僅是安裝檔案。
概念5：“最正確工具組合”這麼個東西不存在
使用哪些工具，完全是你自己說了算的事情。
你也可以選擇什麼工具都不用。但是要記住，隨著專案的發展，複製、黏貼、整合、開啟伺服器等事情會讓你慢慢手忙腳亂起來。
你也可以只使用Node和npm，其他工具一概不用。對於新手來說，這種方式很好，但是和上一條一樣，慢慢你會開始感到力不從心。
或者，除了Node和npm之外，你也可以使用少數幾個其他工具。那麼，你的開發過程將會以Node和npm為核心，然後搭配Grunt和Bower，或是Webpack或是Gulp和Bower。
使用正確的工具，能夠幫你將很多繁瑣的事情實現自動化。但是使用工具的代價，就是你需要付出學習成本。
概念6：build工具學習成本較高，因此你只需要學習你用的上的工具
專案開發本身就已經很複雜了，你可能要使用新的語言或是框架。你可能需要應付複雜的業務邏輯。而引入新的工具，只會讓你的學習成本變得更高。
對此，我的建議是，只學習那些你用的上的工具，其他的就先緩一緩吧。
學習任何一種新東西，最好的方式就是進行實踐。例如，不要為了學習Grunt而去學習，你可以在你的專案中去嘗試運用。
概念7：所有build工具目標都一樣：通過對大量低技術含量任務完成自動化，讓你的工作變得更輕。
使用build工具最開心的時刻，就是我所謂的“build工具涅槃”時刻，在這個時候，你會覺得自己充分發揮了工具的所有潛力。這個時刻，你是你儲存了一個檔案，或是執行了一條命令之後，成千上萬個任務自動執行的時候。
如果你的工具依然要求你手動移動檔案、更改值、或是執行命令才能獲得新的build，那說明你還沒有迎來涅槃的時刻。
使用build工具最大的好處之一，就是在儲存了一個檔案之後，你就能建立一個新的build，並且將其傳送到你的瀏覽器中。它能夠顯著的提升前端開發流程的速度。
那麼我們應該在配置和除錯build工具的時候，應該付出多少精力？很簡單，如果你對當前工具的效果感到滿意，那就可以停止配置了。
概念8：不是你自己的問題，有的時候這些工具的說明文件寫的是挺爛的
我保證，不僅是你會這樣想。很多工具的說明文件寫的都很爛。有的時候，連搞清楚工具最基本的功能都是一件很困難的事情。你會發現，很多人都和你有一樣的困擾。
雖然這樣的文件有點讓人討厭，但是同時也給了你一個機會，讓你去發揮創意和你的程式設計能力。
畢竟，我們的工作不就是解決問題麼？