即便像我這樣非常有經(jīng)驗的開發(fā)者，對于一些前端開發(fā)工具曼验，也會產(chǎn)生疑惑泌射。解決辦法是在概念層面上理解它們是如何工作的，以及如何共同工作的鬓照。
這篇文章是我個人對于前端開發(fā)工具的理解熔酷，拋開代碼層面，我們從理念層面來談它們是如何完成它們的工作的颖杏。
不要對新技術(shù)產(chǎn)生恐懼
目前已經(jīng)有太多的前端開發(fā)工具：Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……很容易讓人產(chǎn)生跟不上節(jié)奏的感覺纯陨。
關(guān)鍵點就是不要害怕，所有這些工具都是為了讓你更高效而設(shè)計的。
要理解它們是什么翼抠，為什么用它們咙轩，怎么用它們，我們只需要理解以下幾個概念阴颖。
概念#1——開發(fā)工具的核心作用“安裝 vs.執(zhí)行”
開發(fā)工具做兩件事：
- 安裝
- 執(zhí)行
當你碰到一個新的工具活喊，第一個問題應(yīng)該是：“這個工具想要幫我安裝還是執(zhí)行？”
npm量愧，Bower和Yeoman都屬于“安裝”工具钾菊，他們能把安裝這件事做的很漂亮。他們可以安裝前端庫偎肃，例如Angular.js或React.js煞烫。它們可以在服務(wù)器上安裝開發(fā)環(huán)境，它們可以安裝測試庫累颂。他們甚至可以幫你安裝其他的前端開發(fā)工具滞详。
"什么是bower？"
”一個包管理器紊馏，用npm安裝它料饥。”
“什么是npm朱监？”
“一個包管理器岸啡，你可以用brew安裝它『毡啵”
“什么是brew巡蘸？”...
——@ddprrt
簡短的說，它們可以安裝你可以想象的和代碼相關(guān)的東西擂送。
Grunt赡若，Webpack，Require.js团甲，Brunch和Gulp都是“執(zhí)行”工具逾冬，它們比安裝工具更復(fù)雜。它們的目標是自動化web開發(fā)中的體力活和容易出錯的任務(wù)躺苦∩砟澹“執(zhí)行”的事情往往被稱作“任務(wù)”。
為了執(zhí)行這些“任務(wù)”匹厘，需要使用它們各自生態(tài)系統(tǒng)中的包和插件嘀趟。每個工具執(zhí)行任務(wù)的方式有差別，它們不會做相同的事情愈诚。有些“執(zhí)行”工具試圖做你拋給它的所有事情她按，其他的專注于一件事牛隅，例如解決Javascript依賴（例如Browserify, Require.js）
有時，在同一個項目中酌泰，可能會使用好幾個這樣的工具媒佣。
這里有一個被“執(zhí)行”工具自動化的任務(wù)列表：
- 在文件中替換一個文本字符串
- 創(chuàng)建文件夾，并將文件移入
- 一鍵執(zhí)行單元測試
- 保存文件時刷新瀏覽器
- 合并所有Javascript為一個文件陵刹，所有CSS文件為一個文件
- 最小化我的Javascript和CSS文件
- 在html頁面中修改
<script>標簽的位置
當你理解了工具的安裝功能和執(zhí)行功能默伍，對它們進行分類也變得非常容易：
概念#2——Node和npm是所有開發(fā)工具的祖先
Node和npm可以安裝和執(zhí)行所有這些開發(fā)工具，所以你的項目會有它們的身影衰琐。正因為這一點也糊，大多數(shù)開發(fā)者在求助于其他工具前，都會盡可能的使用這兩款工具羡宙。
Node和npm落到我們的二分歸納法中狸剃，Node是執(zhí)行工具，而npm是安裝工具狗热。
npm可以安裝像Angular.js或React.js之類的庫捕捂。為了開發(fā)方便，它還可以安裝一個服務(wù)器斗搞，從而在本地運行你的app。它甚至可以安裝例如最小化你的代碼的可執(zhí)行工具慷妙。
另一方面僻焚，Node是“執(zhí)行”工具，例如運行Javascript文件膝擂，服務(wù)器等等虑啤。
如果你剛開始學(xué)習(xí)，從Node+npm開始架馋，建議你在這兩個工具上多花一些時間狞山。當你的項目大到一定程度，你會遇到Node和npm自動化的限制叉寂，那時你再考慮使用其他的開發(fā)工具萍启。
概念#3——有一種構(gòu)建意味著你的應(yīng)用已經(jīng)就緒
開發(fā)者經(jīng)常把Javascript文件和CSS文件分成很多個文件，這樣可以讓我們寫出模塊化的代碼屏鳍，并且每個文件只完成一件事勘纯。一個文件只做一件事可以減少你的認知負擔(dān)（如果你認為多個文件比起一個大文件來說會讓你更困惑，試圖在一個5000行的源文件上工作钓瞭，我想你很快會改變你的想法的??）
但是驳遵，當你的產(chǎn)品發(fā)布后，太多文件不是一個好事情山涡，當一個用戶訪問你的網(wǎng)站堤结，你的每一個文件都需要使用一個額外的HTTP請求唆迁，這會使你的網(wǎng)站加載速度變慢。
作為補救竞穷，你可以為你的應(yīng)用做一次“構(gòu)建”唐责，它會將所有CSS文件合并為一個文件，對于JavaScript文件也一樣来庭。結(jié)果是妒蔚，你把文件大小和文件數(shù)最小化后，用戶拿到的就是優(yōu)化過的文件了月弛，要這樣做肴盏，你需要用一個構(gòu)建工具。
下圖是一個開發(fā)中的應(yīng)用代碼截圖帽衙，注意到它擁有5個<script>標簽和3個<link>標簽菜皂，如果你注意到左邊，你可以看到DEVELOPMENT文件夾下有10個文件
同時下圖是相同的應(yīng)用厉萝，只不過被構(gòu)建工具施展了“魔法”恍飘。
注意到我們是怎么只有一個<script>標簽和一個<link>標簽的？和之前DEVELOPMENT下有10個文件比起來谴垫，現(xiàn)在只有4個文件章母。
應(yīng)用每行都是一樣的，只不過我們將其壓縮到一個優(yōu)雅的小包里翩剪，我們稱之為“build”乳怎。
既然這樣做僅僅只會節(jié)省用戶幾十毫秒的加載頁面時間，你可能會想知道這樣做到底值不值前弯◎阶海可以這樣說，如果你的網(wǎng)站只為少數(shù)一些人提供服務(wù)恕出，你不需要關(guān)心這件事询枚。構(gòu)建工程僅僅只適用于大流量的網(wǎng)站（或者那些被認為即將成為大流量的網(wǎng)站??）
如果你剛剛學(xué)編程，或網(wǎng)站流量較小浙巫，這樣做將不是太有價值金蜀。
概念#4——安裝和執(zhí)行的分界線比較模糊
沒有一個工具是只做一件事且其他工具做其他的事，他們都會擁有安裝和執(zhí)行功能的畴。但是大多數(shù)情況是廉油，一個工具更趨向于安裝或更趨向于執(zhí)行。
一個“安裝”工具有時也會執(zhí)行程序苗傅，npm經(jīng)常這樣做抒线，npm也可以執(zhí)行命令和腳本——不僅僅是安裝文件。一種工具渣慕，就像Yeoman嘶炭，在你的機器上安裝預(yù)編譯引用的應(yīng)用抱慌，同時它也會按需動態(tài)生成新文件，這些工具模糊了安裝和執(zhí)行間的這條分界線眨猎。
概念#5——對于開發(fā)工具抑进，沒有唯一的組合
在項目中使用哪些開發(fā)工具，完全取決于你自己睡陪。
你可以選擇不使用任何工具寺渗，僅僅保證復(fù)制，粘貼兰迫、最小化信殊、開啟服務(wù)、以及其它相關(guān)操作能夠高效運作即可汁果。
或者你僅僅只是用Node和npm來完成這些工作涡拘。對于初學(xué)者來說可以滿足，但是當你的工程增長到一定程度据德，你可能會感覺到體力勞動越來越多鳄乏。
這時你或許可以選擇Node及npm上游的幾個工具。所以你可以把Node和npm作為你自己的核心棘利，也許還可以加上Grunt+Bower或Webpack或Gulp+Bower橱野。
使用Node+npm上面的幾種組合中的一種或幾種，可以讓你的工程中的大部分任務(wù)自動化善玫，代價是學(xué)習(xí)這些工具的學(xué)習(xí)曲線很陡峭水援。
概念#6——開發(fā)工具的學(xué)習(xí)曲線很陡峭，所以只需學(xué)習(xí)什么是必須的
開發(fā)一個應(yīng)用足夠難蝌焚，你可能會學(xué)習(xí)一門新語言或者一個新的框架，或者你有比較取巧的商業(yè)邏輯誓斥，而合并一個開發(fā)工具可能會把額外的一層錯綜復(fù)雜的事物加到你的項目中只洒。問題就在于寫開發(fā)工具相關(guān)的代碼的人并不屬于你的團隊。
我的建議是只學(xué)習(xí)你需要在你工作中涉及到的部分劳坑，其他的不學(xué)毕谴。
最佳的學(xué)習(xí)新事物的辦法是你有一個真實的任務(wù)去完成。例如距芬，為了你的利益涝开，不要學(xué)習(xí)Grunt怎么拷貝文件的。取而代之的是框仔，直到你確切需要這樣做的時候舀武，再使用它來解決吧。
記桌胝丁：早期就把問題復(fù)雜化將會讓你變慢银舱。
概念#7——所有的開發(fā)工具擁有共同的目標：通過將所有體力勞動自動化從而讓你開心
當你發(fā)揮了你的開發(fā)工具的所有潛能瘪匿，我把這種狀態(tài)稱作“開發(fā)工具涅磬”。這是一種當你保存一個文件寻馏，或運行一個命令棋弥，于是大量的任務(wù)便會自動執(zhí)行的狀態(tài)。
如果你的工具仍然需要你手動移動文件诚欠，改變值顽染，或者運行命令才能編譯，那么你還沒有達到“工具涅磬”的狀態(tài)轰绵。
擁有開發(fā)工具的好處便是保存一個文件粉寞，可以引發(fā)你的應(yīng)用的編譯，并發(fā)送到瀏覽器從而刷新新的內(nèi)容藏澳。這會顯著的加速你的前端開發(fā)工作流仁锯。
所以如何衡量你該付出多少努力在配置和設(shè)置開發(fā)工具上？很簡單：只到它所做的事情讓你高興為止翔悠。
概念#8——不只是你业崖，很多人都覺得這些工具的文檔很糟糕
事實上，很多這些工具的文檔都不足蓄愁，經(jīng)常讓我們做一些基本的任務(wù)都變得很難双炕。
預(yù)先定義好的文檔非常之少，你會看到很多不同的操作都導(dǎo)致同樣的錯誤——在StackOverflow上經(jīng)炒樽ィ看到回答的是同一個問題妇斤。
即便文檔少這件事非常厭煩，但這些工具仍然可以增強你的代碼技巧丹拯，并實現(xiàn)了很多創(chuàng)造性的事情站超。
原文：https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.hpbycrwz3
