這幾款前端必備構建工具合輯，我們幫你整理好了！

工欲善其事，必先利其器。想要在春招中過五關斬六將，前端基礎知識掌握的不紮實可不行。今天小渡就給大家盤點一下幾款最熱門的構建工具。

說到構建工具，我們往往會在前面加「自動化」三個字，因為構建工具就是用來讓我們不再做機械重複的事情，解放我們的雙手的。之前小渡也和大家探討學習過自動化構建工具，今天咱們主要來聊一聊按照工具類型對其的分類。

其實，構建工具,說白了就是幫助我們通過配置或者編寫約定好的代碼,來自動完成上面的這些功能的一個工具。對於需要反覆重複的任務，例如壓縮、編譯、單元測試、linting等，自動化工具可以減輕我們的勞動，簡化我們的工作。

說到這裡是不是有點懵？

其實簡單來說，js、css、less、img等等都需要進行處理或編譯後才能發布的，比如說壓縮，合併，處理css瀏覽器前綴等等，而代碼又需要維護，如果你不用自動構建工具，而是手動去做，也就是說你每改一次代碼，就要壓縮，合併等把一系列處理都做一次，才能用。學會自動構建工具，再加上各種配套的插件，可以自動完成各種複雜的處理。

其實啊，構建工具雖然最主要的功能是實現自動化處理，讓我們日常工作更方便快捷以外，有的工具還提供模塊化、組件化的開發流程功能。因此具體來說，按照工具的類型，我們可以把他們分為模塊化打包類、任務流構建類和集合型工具類（腳手架）三種。

1

模塊化打包類

有過Node.js開發經歷的同學應該對模塊很熟悉，需要引用組件直接一個 require 就OK，這類工具就是這個模式，還可以實現按需載入、非同步載入模塊。

常用工具包括Browserify、Webpack、rollup.js等。Browserify可以讓你在瀏覽器端運行使用require載入的js代碼，我們可以在控制台利用基於node環境中得npm命令進行安裝，並將js文件編譯成可以被瀏覽器識別得js語法。

WebPack則可以看做是模塊打包機。

它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。

而Rollup是一個JavaScript模塊打包工具，可以將小塊代碼編譯成大塊複雜的代碼。開發者可以使用ES2015模塊和TypeScript，最終打包成一個獨立的可運行在瀏覽器或者Node.js環境的文件。

2

任務流構建類

這是基於任務的構建行為，是不在乎操作對象是否為模塊化的，也是小渡今天要介紹的重頭戲。

這類工具的目標是通過配置來解放日常需要重複的工作——轉化、合併壓縮和單元測試等等。

有同學會有這樣的疑問：這些操作Webpack和Rollup不是也能做嗎，為什麼還要用任務流呢？是的，的確這些操作webpack和rollup可以完成，但因任務流工具和模塊化構建的出發點不同，任務流工具是十分純粹的自動化行為，雖然在開發過程中很少用到，但多了解學習還是很必要的。

任務流構建工具常用的包括Grunt、Gulp兩大工具。

Grunt

作為老牌構建工具，它是通過配置驅動——通過獲取到的JSON配置執行操作，來流水線式執行相應任務。雖然在學習成本和執行效率上不出眾，但它依然被許多知名項目如WordPress、Twitter和Jquery等使用，也擁有持續更新的完整生態圈和中文文檔。

但同時特點也是缺點，Grunt缺點也是配置驅動，當任務非常多的情況下，試圖用配置完成所有事簡直就是個災難；再就是它的I/O操作也是個弊病，它的每一次任務都需要從磁碟中讀取文件，處理完後再寫入到磁碟，這樣一來當資源文件較多，任務較複雜的時候性能就是個問題了。

Gulp

作為一款新型的構建工具，雖與Grunt的功能相同，但其與Grunt相比，Gulp無需寫一大堆繁雜的配置參數，API也非常簡單，學習起來很容易，而且Gulp使用的是nodejs中stream來讀取和操作數據，其速度更快。

如果你還沒有使用過前端構建工具，或者想找一款簡易入門的工具的話，那就嘗試一下Gulp吧。相比較於Grunt，Gulp擁有以下三大優勢。

代碼驅動易於使用

代碼驅動即通過執行實際代碼驅動程序執行，與常見的配置驅動不同（Webpack、Rollup和Grunt等都是配置驅動）。

從任務流構建的角度上看，代碼驅動相比配置驅動有三點好處：一是高度的靈活；二是沒有過多的配置項，減少學習成本；三是更方便錯誤的斷定和異常情況的調試。

Node流構建快速

Gulp作為後來者，充分利用NodeJS流的思想進行IO操作，極大增加了大型項目的構建速度。一步到位，無需多次的IO操作。

易於學習簡介明了

Gulp有十分精簡的API。你能想到各種類型的任務，基本是通過僅有的五個可鏈式操作的方法實現的嗎？不僅僅是學習和使用方便，編寫後的功能也是一目了然。通過最少的API，掌握Gulp毫不費力，構建工作盡在掌握。

總的來說，Gulp是一款非常輕量級的工具，但是gulp使用者來說，並不是每個人都有非常強的處理錯誤能力，如果遇到插件bug（當然這種情況很少見），需要聯繫作者，這個是一件非常棘手的事情。但是這種風險是存在的。

那麼我們該如何選擇這兩款工具呢？在做選型的時候，我們往往會考慮以下幾個因素：是否符合團隊的技術棧；是否符合項目需求；生態圈是否完善、社區是否活躍。排除前兩點主觀的因素，我們在這兩款主流工具中看一下他們的比較分析。

從工作流來看，這兩款工具都是基於任務類型，所以它們的工作流是一致的。可以看到它們打包的策略通常是Allin one，最後頁面還是引用css、img、js，開發流程與徒手開發相比並無差異。

從適用場景來看，通過上面的介紹可以看出它們側重對整個過程的控制管理，實現簡單、對架構無要求、不改變開發模式，所以非常適合前端、小型、需要快速啟動的項目。因此，這兩款工具也成了任務流構建工具中的熱門選手。

3

集合型工具

集合型工具是使用了多種技術棧實現的腳手架工具，它可以用來快速的自動生成項目的必要文件和基礎文件結構。腳手架工具的好處是即開即用，缺點就是它們約束了技術選型，並且學習成本相對較高。

主流工具包括Yeoman、FIS、jdf、Athena、cooking、weflow等等。

Yeoman

它是一個通用的腳手架搭建系統，可以創建任何的類型的app。同時它又是」語言無感知」的，支持創建任何類型開發語言的項目，Web,Java, Python, C#等等。

Yeoman的通用性在於，它本身不做任何決定，所有的操作都是通過Yeoman環境裡面的各種generator實現的。通過自定義generator，我們可以創建任何格式的項目目錄。這是Yeoman的最大魅力之處。

FIS

作為老牌前端構建化工具，FIS提供了一套貫穿開發流程的開發體系和集成開發環境，為產品線提供前端開發底層架構，這能幫助工程師提高開發效率，溝通協作效率，快速實現需求並達到代碼的最優化。但是隨著近幾年源源不斷的「新生代工具」逐漸佔領前端市場，FIS似乎逐漸暫緩了突破的步伐以至於備受吐槽。

儘管不如前幾年火熱，但重要的是FIS的內在設計思想值得借鑒，在進行二次開發，或者準備自己開發一套屬於自己團隊編譯工具，都有十分重要的借鑒意義。

所以說，工具就只是工具而已，是你學會前端技能的一種手段方法。當你是覺得某個工具不是一個好的構建工具的時候，你完全可以基於它的思想開發一個啊，總之適合自己的才是最好的。

以上就是本次小渡分享的前端構建化工具，各位同學get到了嗎？

希望這些工具對大家有所幫助和啟發，祝各位在春招都能成為offer收割機，新的一年前端技術棒棒的，薪資翻翻，一起在國內推動大前端的未來！

本文轉載自【Duing】

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！