首先列出新手容易混淆的几个家伙。
- 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的插件。
