Gulp / Grunt和browserify / webpack之间的关系

Posted 2020-10-06 Reylee

一、Gulp / Grunt是构建工具，可以配合各种插件做js压缩，css压缩，less编译甚至自动刷新页面以此来 替代手工实现这些繁琐的工作。

二、Browserify / Webpack和 Seajs / Requirejs一样都是JS模块化的方案。两类也有所区别：

1. Seajs / Requirejs : 是一种在线”编译” 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
2. Webpack / Browserify : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。这里以Webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

总结：Gulp / Grunt属于工具，而Webpack是模块化方案。Gulp也可以配置seajs、requirejs甚至Webpack的插件。