Gulp 对比 Webpack

1

Gulp是任务运行工具。简单来说，任务运行程序是一个允许您自动执行可重复活动的应用程序。任务在JS文件中定义，并使用包含任务名称的命令执行。

Webpack是一个模块构建工具。主要目的是帮助程序模块及其依赖构建静态资源。

gulp可以执行单个指令，如：压缩某js文件。

webpack是用来整合多个js,css模块成一个文件。

2

gulp指令定义在js文件中，webpack在package.json文件中定义任务脚本。

3

webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便，自动化构建。webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

Glup侧重于前端开发的整个过程的控制管理，我们可以通过给glup配置不同的task来让glup实现不同的功能，从而构建整个前端开发流程。（通过gulp中的gulp.task（）方法配置，比如server、sass/less预编译、文件的合并压缩等等）

区别：

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

4

怎么解释呢？因为 Gulp 和 browserify / webpack 不是一回事

Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

原文：https://blog.csdn.net/xllily_11/article/details/51782005?utm_source=copy

使用这两种工具，您可以处理几乎每种类型的工作流。 在可用性方面，Gulp是获胜者：更容易定义和执行您的任务。 另一方面，Webpack的配置选项更加灵活，开发速度非常快，每天都有一个社区规模扩大。