随着前端工程师需要维护的代码变得越来越庞大和复杂，代码的维护、打包、发布等流程也变得极为繁琐，人为的错误也随着流程的增加而增加了更多的出错率。所以每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之越来越多的人开始使用构建工具。

说到构建工具，我往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的(my god)。

1.Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

网站地址：https://doc.webpack-china.org/

2.Grunt

Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。

网站地址:http://www.gruntjs.net/

3.Gulp

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。

网站地址：https://www.gulpjs.com.cn/

三者区别：

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。而webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

grunt应该与gulp比较，但gulp更易学，Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。

小结：前端工程自动化方案更新很快， 学习这些工具，是为了减轻重复劳动，提高效率。选择适合自己的方案，而不是在追寻技术的路上迷失了方向。

想了解更多编程内容，请关注本头条号。