时下流行的前端构建工具主要有 gulp 和 webpack，因为工作的关系，最近使用的比较多，所以结合网上的知识和自身使用经验简单总结下两者的区别。

gulp

gulp强调的是前端开发的工作流程。

我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”

webpack

webpack是一个前端模块化方案，更侧重模块打包。

我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

就是需要通过其配置文件（webpack.config.js）中 entry 配置的一个入口文件（JS文件），然后在解析过程中，发现其他的模块，如scss等文件，再调用配置的loader或者插件对相关文件进行解析处理。

两者区别

虽然gulp 和 webpack都是前端自动化构建工具，但看2者的定位就知道不是对等的。

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

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