構建工具：webpack與grunt/gulp

1.    webpack

官網：http://webpack.github.io/docs/

中文文檔：http://www.css88.com/doc/webpack2/

Webpack 是一個模塊打包工具。它將一堆文件中的每一個文件都做爲一個模塊，找出他們的依賴關係，將它們打包爲可部署的靜態資源。

 

2.    Grunt/gulp

a)     構建工具是什麼，有什麼用

知乎回答https://www.zhihu.com/question/35595198

自動化構建工具，就是用來代替手工執行機械重複的事情，解放咱們的雙手的。

例如，項目使用 CoffeeScript/ES6代替Javascript，但瀏覽器對這些語言是不支持或者支持得不完整的，要讓它在瀏覽器裏運行起來就要執行如下操做：

（1）執行編譯命令：xx.coffee->xx.js

（2）執行壓縮醜化命令：xx.js->xx.min.js

若是文件代碼被修改，那麼上面兩條命令就要再執行一遍。一樣的，也會有用Less寫CSS，用Jade寫HTML，用webpack/Browserify模塊化、爲非覆蓋式部署的資源加MD5戳等等。自動化構建工具就是用來幫助咱們完成這些重複而機械的工做的。

b)     gulp VS grunt

gulp VS grunt知乎專欄https://zhuanlan.zhihu.com/p/20309820

3.    webpack與grunt/gulp

a)     不一樣職能的工具，能夠配合使用

官方對webpack的定位是模塊打包器，而gulp/grunt屬於構建工具。雖然webpack能夠代替gulp的一些功能，可是很明顯webpack和gulp/grunt不是一個職能的工具。webpack官方中給出了webpack with gulp/grunt的說明，二者能夠配合共同服務於一個項目的。

b)     構建gulp/grunt與webpack相配合的前端工做流

gulp與webpack的迷思http://www.javashuo.com/article/p-hgyewoja-cd.html

要構建這樣一個工做流,首先要理清幾個問題

（1）什麼工做應該交給gulp，什麼工做應該交給webpack

（2）webpack貌似支持增量更新，gulp是否支持增量更新

（3）如何實現live reload

具體配置方法參考官網

Webpack與grunt官網http://webpack.github.io/docs/usage-with-grunt.html

Webpack與gulp官網http://webpack.github.io/docs/usage-with-gulp.html