看完這篇讓你對各類前端build工具再也不懵逼！

本文原標題爲：我終於弄懂了各類前端build工具

譯者：@Christian

譯文：https://www.sdk.cn/news/5412

原文：https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.khi6r16h2

如今對於原文作的一些筆記，要看更詳情的，可點擊這裏

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）」。

在你理解了前端工具分爲安裝類工具和幫你作事的工具以後，你就能夠輕鬆的對它們進行歸類：

 

 

概念2：build工具的「祖宗」是Node和npm

Node和npm負責安裝和運行全部這些工具，所以你的全部項目中都會有它們的身影。Node是作事工具，而npm則是安裝工具。

 

npm能夠安裝Angular.js和React.js等庫。它還能夠安裝服務器，讓你的應用在開發階段能夠在本地運行。它還能夠安裝不少其餘工具，幫你完成不少事情，例如簡化代碼。

 

而Node，則是幫你完成事情的，例如運行JavaScript文件，以及服務器等。

 

概念3：build其實就是production-ready版本的應用

 

給項目建立「build」，它要將全部CSS文件合併成一個文件，而後再合併JavaScript文件。這樣一來，你就能夠將文件完成最小化。要想建立這個build，你須要使用build工具。它的做用不過是節省用戶幾毫秒的時間。若是你只是在學習開發的階段，或者你的站點流量較低，你沒有必要花時間和精力去生成build。

 

概念4：「安裝」和「作事」之間的界限有時會模糊

 

沒有工具只能作一件事情，而沒法作另外一件事情。全部工具都是「安裝」和「作事」的結合體。可是通常來講，一個工具會有本身的強項，或是強於安裝，或是強於作事。

 

概念5：「最正確工具組合」這麼個東西不存在

使用哪些工具，徹底是你本身說了算的事情。

使用正確的工具，可以幫你將不少繁瑣的事情實現自動化。可是使用工具的代價，就是你須要付出學習成本。

 

概念6：build工具學習成本較高，所以你只須要學習你用的上的工具

只學習那些你用的上的工具，其餘的就先緩一緩吧。

 

Save