前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。
Gulp
Gulp就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”
另外，Gulp是通过task对整个开发过程进行构建。
Webpack
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
Gulp和Webpack功能实现对比
简单介绍了一下Gulp和Webpack的概念性的问题和大环境，接下来进入本文的主题，对比一下Gulp和Webpack的优缺点。将从基本概念、模块化开发、文件合并与压缩、启动本地Server、mock数据、版本控制几个方面对Gulp和Webpack进行对比。
基本概念
首先从概念上，我们可以清楚的看出，Gulp和Webpack的侧重点是不同的。
Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。
Webpack有人也称之为模块打包机，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。
另外我们知道Gulp是对整个过程进行控制，所以在其配置文件（gulpfile.js）中配置的每一个task对项目中该task配置路径下所有的资源都可以管理。
Webpack则不是这样管理资源的，它是根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
模块化开发
所谓的前端模块化开发是指，在开发的时候，把不通的资源文件按照他的具体用途进行分类管理，在使用的时候利用CommonJS、AMD、CMD等规范将这些资源文件引入到当前文件中。然后在测试或者最后上线的时候，将这些资源文件按照一定的要求进行压缩合并再加上版本控制处理。即对内容的管理，是为了解耦合。
在实际开发过程中，在src目录下工作，html、js和css等文件通过gulp的task配置，执行合并和压缩后输出到build目录下。在详细一点就是：
1. 创建主页html文件
2. 创建与之对应的app.js入口文件和app.scss入口文件。这两个文件只通过CommonJS规范引入各自views文件中自定义的js(或scss)文件，具体逻辑不写此文件中。
3. 在views目录下编写js（或css）文件的逻辑代码，其中如果多个文件需要公共逻辑或者工具方法，就可以抽离出来在util文件夹下创建对应的公共方法，然后在views中需要的js（或css）文件中通过CommonJS规范引入使用。libs目录下的第三方库或框架也是这个思想去引用。
4. scripts目录下的tpls文件是用来放置html模板的，引用方式和引用libs相同。
webpack的模块化实现和Gulp的基本相同，只不过实现过程中使用到的插件或者说模块不同，配置不同而已。对于解决webpack文件之间的依赖关系，可以使用extract-text-webpack-plugin的模块将css文件从js文件中剥离出来。
文件合并与压缩
上面的模块化中，模块化其实很大一部分是在做文件的合并与压缩操作。
Webpack应该比Gulp更擅长文件合并和压缩，毕竟人家被称为模块打包机。
Gulp可以对css文件以及js文件进行合并压缩处理，而Webpack可以实现对css文件，js文件，html文件等进行合并压缩和图片的压缩，还可以对js文件进行编译（如es6–>es5，react jsx）等等，这些都是通过Webpack的loader实现的，当然这些也可以加入到Gulp中，毕竟Gulp把Webpack当做一个模块，通过gulp-webpack都引入了。
| gulp | webpack | |
|---|---|---|
| css的压缩 | gulp-minify-css | uglifyJS(style-loader!css-loader 读取和插入) |
| js合并压缩 | gulp-uglify和gulp-concat | uglifyJS |
| html合并压缩 | HtmlWebpackPlugin（创建index.html）html-minifier | |
| sass/less预编译 | gulp-sass 和gulp-less | scss-loader、less-loader |
| 图片的压缩 | gulp-imagemin和imagemin-pngquant | url-loader?limit=8192 |
启动server
gulp启动server: gulp-server模块
livereload:true属性只是监控到我们修改文件后刷新浏览器重新请求文件
webpack启动server: webpack-dev-server模块
一是为静态文件提供server服务，二是自动刷新和热替换(HMR)
webpack-dev-server --inline --hot
mock数据
Gulp中对mock数据的实现使通过NodeJS内置的fs模块和url模块实现的。
具体来说，就是通过NodeJS拦截http请求，根据请求URL来模拟后端做出处理后返回不同的数据。
webpack通过json-server来实现，它的实现原理就是，启动一个本地3000端口作为mock数据的端口，然后我们在Webpack中配置一个代理，让所有请求代理到3000端口上去，就可以获取到数据了。
版本控制
gulp通过gulp-rev和gulp-rev-collector模块，前者用于生成文件的MD5码文件和按MD5码命名的资源文件，后者是利用MD5码，对文件名进行替换。
Webpack中需要版本控制的有css、js文件，不过Webpack的版本控制只实现了将css、js文件添加hash值方式命名的文件方式，修改引用路径中的文件名需手动实现。
不过实现确实很简单，只需要将webpack.config.js配置文件中的output.filename和plugins中的输出文件名称修改一下即可。
总结
Gulp侧重整个过程的控制，Webpack在模块打包方面有特别出众。所以，Gulp + Webpack 组合使用更方便。
参考自：两者对比
webpack
gulp
未阅读：
gulp+webpack1
gulp+webpack2
gulp+webpack3
网友评论