構建工具的本質是為了簡化開發難度，使開發更具有靈動性，節約開發時間 前端開發核心是 html、css、js。

前端構建工具有webpack、gulp、grund等。

前端開發目前的趨勢是模組/元件化開發。那麼問題來了，假如我們想要元件開發的話，勢必需要分割不同的檔案，如果引入的資原始檔過多的話，勢必會影響載入效能。通常我們寫css的時候，我們會加入瀏覽器相容程式碼，當然也有可能有遺漏，有的時候就會造成適配問題或其他的各種問題...

這時候我們的構建工具就可以起作用了，構建工具可以處理靜態資源。比如壓縮程式碼、合併程式碼、美化程式碼，同時也可以壓縮一些圖片等，像我們使用的postcss就可以自動的將相容程式碼加入你所編寫的css裡面，我們使用babel將es6的JavaScript語法轉化為相容的es5的語法。這些都是為了節約開發成本，簡化開發時間的功能。

現在前端構建工具主要有grunt、gulp，這裡主要講解gulp，之所選擇gulp，是因為gulp有以下幾大優點1、易於使用：採用程式碼優於配置策略，Gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。2、高效：透過利用Node.js強大的流，不需要往磁碟寫中間檔案，可以更快地完成構建。3、高質量：Gulp嚴格的外掛指導方針，確保外掛簡單並且按你期望的方式工作。4、易於學習：透過把API降到最少，你能在很短的時間內學會Gulp。構建工作就像你設想的一樣：是一系列流管道。詳情請見 http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

前端構建工具，主要用於

1. 將多個檔案打包，減少檔案數量，最佳化檔案請求數

2. 將檔案壓縮，減少檔案體積，同時讓他人不容易扒原始碼

3. 程式碼模組化

構建工具是可以幫助開發者管理本地原始檔，最佳化開發流程，降低開發複雜度，使開發者更加專注在業務邏輯開發上的一種工具。構建工具就是用來讓我們不再做機械重複的事情，解放我們的雙手的。