一、構建工具可以做什麼？
安裝 vs 做事情
1、安裝包工具：例如：npm、Bower，Yeoman可以安裝幾乎所有的東西。
他們可以安裝前端框架，比如Angular.js或者React.js。
他們可以爲你的開發環境安裝服務器。
他們可以安裝測試框架。
他們甚至幫你安裝其他的前端構建工具。
2、做事情的工具：比如Grunt、Webpack、Require.js、Brunch和Gulp。這些工具有些複雜。
做事情的工具的目的就是自動化，它避免了前端開發中的煩瑣事和一些易於犯錯的地方。
下面就是一些我用“做事情”工具自動化完成的一些任務：
1.替換一個文件中的文本字符串
2.創建一個目錄然後往這個目錄中移動一些文件
3.用一條命令執行單元測試
4.當我保存文件時刷新我的瀏覽器
5.把我所有的JavaScript文件打包成一個文件，把我所有的CSS文件合併成一個文件
6.壓縮我的Javascript文件以及我的CSS文件
7.修改網頁中的script標籤的位置
二、所有構建工具的鼻祖是Node和npm
Node和npm安裝和運行所有的這些構建工具，所以你在項目中總是可以看到他們。正因如此，許多開發者在他們安裝另外工具時都會多次使用到這兩個工具。
三、安裝 vs 做事情 之間的界限可能是模糊的
沒有工具只做一件事情。他們都混雜着一個安裝和做。但是通常而言，一個工作傾向於做一件事多於另一些事。
開發者經常將JavaScript和css文件分爲多個文件。每一個文件都可以讓你專注於寫某一個模塊的功能。這樣就可以減少你閱讀代碼的認知負擔。（如果你覺得把文件分爲多個文件有點迷惑的話，你想想假如你把一個文件寫成5000行時，你怎麼去讀呢，這是你就知道分散文件的好處了）
但是當你需要把你的應用上線時，多個JavaScript和CSS文件是不現實的。當用戶訪問你的網站時，每一個js或者css文件都會發起一個新的http請求，這會讓你的網站加載起來很慢。
所以爲了改進這個問題，你可以創建一個build文件，這個文件把所有的css文件合併到一起，js文件也都合併到一個文件。這樣，你就減少了用戶請求的數量。爲了創建build文件，你就需要一個構建工具。
下面就是開發應用中的一個快照。注意它包含5個script標籤和3個link標籤了嗎？如果你看左側，注意到開發文件夾下有10個文件了嗎？
然後下面就是同一個應用構建完之後的代碼情況。
注意到我們只有一個script和一個link標籤了嗎？然後開發文件夾中只有4個文件了嗎，之前我們可是有10個文件呢。
應用跟之前是一模一樣的，我們只不過把他轉化成一個稱之爲構建之後的代碼小包。
你可以想知道爲什麼需要構建呢，難道就是爲了節省用戶幾毫秒的時間嗎？好吧，如果你創建了屬於你或者幾個人的網站的話，你不需要有這些困擾。生成一個構建之後的應用只有在高訪問量的情況下才有必要。（或者那些你覺得以後可能會被高訪問）
如果你正在學習開發或者僅僅在開發一個流量不怎麼高的網站的話，生成一個構建的應用可能不是很有必要。
四、構建工具有一個陡峭的學習曲線，所以只學那些必要的部分
過早的複雜性會拖慢你的腳步。
五、有時候不是你不夠聰明，而是文檔很糟糕。
對於很多構建工具，文檔一般是不健全的。有時候就連最基本的功能都很難搞清楚怎麼去實現。
你需要記住的是對於構建工具來說，很少有預先定義好的構建工具組合。你會發現開發者們都通過不同的方式實現了同樣的結果 — 就好像有時候在stackoverflow上你會發現對於同一個問題有很多不同的答案。
這當然很令人煩惱，同時他也給你提供了一個機會去放鬆一下你的編碼思維，然後去實現一些創造性的東西。
畢竟，這不就是爲什麼我們做這個嗎？