自动化构建工具：Webpack vs Gulp vs Grunt

以前JavaScript盛行的时候，没有人会想到开发人员会使用Gulp，Grunt或Webpack等构建工具。这是因为每个浏览器都显示代码结果而无需任何编译。然而，随着项目范围的扩大，诸如开发人员生产力，应用程序性能和安全性等方面变得越来越重要。

它们有助于改善前面提到的方面，并使例行开发人员的操作自动化，例如CSS预处理，图像压缩，代码压缩等，这样可以极大地提高应用程序的性能并节省开发时间，例如任务运行程序和模块打包程序（e.g. Webpack）将多个JS文件打包到单个程序包中，它减少了对服务器的请求数量，从而提高了性能。

1.Grunt

Grunt是用于前端开发人员运行预定义重复任务的命令行工具。而任务是使用配置对象声明式定义的，这些任务由插件处理以使核心软件包保持足够的大小。它用于自动执行JavaScript工作流，例如连接和缩小JS文件，执行测试，刷新浏览器上传脚本更改等。

优点：庞大的插件生态系统，可同时执行各种任务（Grunt插件注册表中有6010多个项目）

缺点：随着配置的增长可能变得复杂；缺乏灵活性和罕见的任务处理

2.Gulp

Gulp是用于定义和运行耗时任务的另一个工具包，但是采用了不同的方法。比较Grunt vs Gulp，核心区别是Grunt使用配置对象声明式定义任务，而Gulp将它们定义为JavaScript函数。

优点：更加清晰地了解当前流程并更好地控制流程；庞大的Gulp插件生态系统；由于stream的使用和内存操作，性能更快；与Grunt相比，所需的代码量更少

缺点：streams和promises很难理解

3.Webpack

Webpack为开发人员提供了控制模块拆分方式的控制权，从而使他们能够针对特定情况和无法正常使用的变通方法来调整构建。

在谈论Webpack vs Gulp vs Grunt的性能时，后两者讨论了与配置相匹配的文件的定义路径，而Webpack分析了整个项目。它会检查所有依赖项，并使用加载程序对其进行处理，并生成捆绑的JS文件。

优点：Webpack中的依赖图概念可确保更轻松地拆分代码；Webpack-dev-server支持热和实时重新加载

缺点：比较难配置

在过去的两年中，Webpack的受欢迎程度激增并超越了Grunt和Gulp。主要原因是Webpack结合了任务运行程序和模块捆绑程序的功能。不过，在当代JavaScript世界中，也存在诸如Browserify + Grunt / Gulp之类的方案的空间。由于每个工作流程工具都有无数个插件，因此，任何一个插件都可以获得理想的结果。