js自動化構建工具-----webpack、gulp與grunt的區別和對比

前端自動化

首先先聊一波爲何要用構建化工具，如今這個年代，前端的代碼愈來愈冗餘和龐大，代碼維護、打包和上線的流程也很是繁瑣。因此咱們須要一個工具來精簡咱們的流程來提升效率，因此咱們須要自動化的部署工具。

GRUNT

官網：http://www.gruntjs.net/

文檔：http://www.gruntjs.net/getting-started

grunt是一套前端自動化工具，一個基於nodeJs的命令行工具，做用：壓縮文件，合併文件，簡單語法檢查。主要基於Gruntfile這個文件，能夠進行壓縮、編譯、單元測試、linting(js檢查)等。Grunt生態系統很是龐大，有不少插件能夠選擇，而且能夠本身寫插件發佈到npm上面。

 gulp

官網：http://www.gulpjs.com.cn/

gulp.js是一套基於node.js流的自動化構建工具

優勢：能夠快速構建項目並減小頻繁的IO 操做。

webpack

官網：http://webpackdoc.com/

webpack是目前很熱門的前端模塊化管理和打包工具，它能夠將不少鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過loader的轉換，任何形式的資源均可以視做模塊，如commonJs模塊、amd模塊、es6模塊、css、圖片、json、coffeescript、less等。