首先列出新手容易混淆的幾個家伙。
- gulp
- grunt
- require.js
- sea.js
- browserify
- webpack
如分割線所示，分割線之內的家伙，才是更加接近、可以比較的概念
gulp和grunt
gulp之流是工具，它可以優化前端的工作流程。例如：自動刷新頁面、壓縮css / js / html ，less編譯成css 等。
你只需要使用gulp 并且 配合相關的插件，就可以將之前手動完成的工作交給gulp代為完成。
require.js 、sea.js 和 browserify 、webpack
而說到require.js，就要提到其他幾個模塊化方案，常見的包括：sea.js / browserify / webpack ，他們都屬于 模塊化解決方案
這其中的前兩者 和 后兩者的模塊化解決方案又有些不同之處。
- sea.js和require.js是 “在線”編譯模塊化方案
- 他們相當于在頁面上加載一個CMD或者AMD解釋器，這樣瀏覽器就能認識define / export / module等標識，你把代碼寫到define里，從而實現模塊化
- browserify和webpack是 預編譯模塊化集成方案
- 這種方案是預編譯的。不需要加載什么解釋器，瀏覽器可以識別你預編譯完成后的代碼。不管你在本地是用的 AMD / CMD / ES6 風格的模塊化方案，在預編譯后，都是瀏覽器可以直接識別的JavaScript
所以gulp是工具，webpack、sea.js是模塊化解決方案,Gulp也可以配置seajs、requirejs甚至webpack的插件。
