没有人喜欢做无聊和重复的工作。好消息是，我们可以让我们的计算机为我们做这些事情。当谈到web开发构建自动化时，有两个主要的参与者:Grunt和Gulp。
但是，你应该选择哪一种呢?它们之间有什么区别?哪个更好?让我们来看看Grunt和Gulp之间的相似点和不同点，以便帮助您选择合适的JavaScript任务运行器。
Grunt和Gulp的相似之处
咕哝着说而且狼吞虎咽地吃可以自动化繁琐的、容易出现人为错误的构建过程，例如:
- 代码缩小
- 代码质量分析
- 图像优化
- vendor-prefixing
- 单元测试
- …以及更多
基本上，如果你反复做某件事，你有很大的机会可以使用Grunt或Gulp来自动化它。通过将任务运行器集成到我们的工作流中，我们可以避免在计算机可以为我们做的事情上浪费时间和精力。
最终，这意味着我们将能够专注于最重要的事情:创造和创新。可以将任务运行器看作自动化开发任务的框架。JavaScript web开发框架(如Angular和jQuery)使编写JavaScript代码变得更容易。
同样，Grunt和Gulp使编写构建自动化代码变得更容易。任务运行器是如何工作的?简单。
你编写指令告诉任务运行器:
- 您希望它处理哪些文件
- 您希望它对文件做什么(缩小它们，分析它们的错误，等等)
- 您希望它将处理过的文件放置在哪里
因为Grunt和Gulp是JavaScript任务运行器，所以我们使用JavaScript编写指令。下面是一步一步的教程，将帮助您开始使用Grunt和Gulp:
乍一看，咕噜和咕噜都很像。使用其中任何一种都会导致相同的结果:一个更高效的web开发工作流。
所以，从更广泛的意义上讲，Grunt和Gulp是相同的:
- 它们是任务运行器，可以自动化我们的开发工作流的一部分
- 我们使用JavaScript编写希望它们运行的任务
- 他们都需要节点而NPM要发挥作用
相似之处仅此而已。它们的配置方式和执行任务的方法是不同的。
咕噜声和吞咽声的区别
Grunt和Gulp有两个主要区别:
- 你配置任务的方式。呼噜声是基于配置。是吞咽基于流的。
- 他们执行任务的方式。Grunt运行您希望在顺序．
Gulp试着和他们一起跑最大并发，这意味着如果可能的话，它将尝试并行执行进程。
任务配置
让我们通过一个例子来探讨Grunt和Gulp之间的主要区别。我们将为Grunt和Gulp创建一个任务。这个任务将使用一堆CSS文件并优化它们以提高web性能。下面是这个任务要做的:
- 文件中找到的所有CSS文件
src目录到一个大的样式表 - 缩小样式表
- 将缩小后的文件放入
css的目录styles.min.css - 中报告任务执行时间命令行任务完成后
任务配置
模块。导出=函数(grunt) {//在命令行中报告任务执行时间要求(“time-grunt”)(繁重);//任务配置咕哝。initConfig({pkg: grunt.file.readJSON('package.json')，//合并src目录下的所有CSS文件concat_css: {dist: {src: [' src / * . css '],桌子:“css / styles的css}},//缩小样式表Cssmin:{目标:{//将缩小后的文件写入css目录文件:[{“css / styles.min.css”:[' css / styles。css '] }] } } });//加载插件grunt.loadNpmTasks(“grunt-concat-css”);grunt.loadNpmTasks(“grunt-contrib-cssmin”);//使用' grunt '命令运行任务咕哝。registerTask('default'， ['concat_css'， 'cssmin']);｝
Gulp任务配置
//加载插件Var gulp = require('gulp');Var concatenate = require('gulp-concat-css');Var minify = require('gulp-cssmin');Var duration = require('gulp-duration');//任务配置饮而尽。任务(“违约”,function () {gulp.src (src / * . css)//合并src目录下的所有CSS文件.pipe(连接(“styles.min.css”))//缩小样式表.pipe(贬低())//在命令行中报告任务执行时间.pipe(duration('执行时间:'))//将缩小后的文件写入css目录.pipe (gulp.dest (css /));})；//使用' gulp '命令运行任务
任务配置差异
Gulp的语法更简洁。
Gulp的伟大之处在于基于流的构建系统。您只需通过将所有进程一个接一个地连接起来来创建任务。有点像我们如何在jQuery的选择器函数上链接方法。
这种神奇的发生是因为插件交换的对象格式，即所谓的Vinyl。Vinyl只是一种描述虚拟文件对象的抽象，它可以引用FS上的现有文件、流，也可以引用带有null的死胡同。- Preslav RachevGulp vs Grunt。
为什么一个?为什么是另一个?
我所发现的大部分任务都是用Gulp可以使任务配置文件更短、更清晰。换句话说，使用Gulp，执行相同进程需要编写的代码更少。你可能认为我有偏见——也许有一点——但我确实用过这两个咕哝和吞咽。
(我会根据我所从事的项目类型来选择。)下表列出了任务中使用的Grunt和Gulp插件。
| 过程 | 繁重的插件 | 吞咽插件 |
|---|---|---|
| 连接 | grunt-concat-css | gulp-concat-css |
| 缩小 | grunt-contrib-cssmin | gulp-cssmin |
| 在命令行中显示任务执行速度 | time-grunt | gulp-duration |
任务执行
任务执行的方式在Grunt和Gulp中是不同的。
Grunt如何执行任务
对于任务中的每个流程，Grunt需要:
- 打开上一个进程中处理过的文件
- 运行当前流程
- 保存更改
- 关闭当前处理的文件，以便下一个进程可以访问它
Gulp如何执行任务
另一方面，Gulp不需要在进程之间创建临时文件的中间步骤。
从一个进程中出来的代码直接进入下一个进程，节省了大量的I/O时间。这就是为什么它是“基于流”的。杯使用协调器，这有助于它以最大的并发性运行进程。这意味着Gulp将尝试同时执行多个进程。从理论上讲，这使得Gulp可以做到更快地完成任务。
测量任务执行速度
你可以测试Grunt和Gulp之间的速度差异。
它们都可以报告完成任务所需的时间。为了测量我们前面创建的任务的执行速度，使用了time-grunt和gulp-duration插件。Grunt任务和Gulp任务各执行5次。
使用了相同的源文件(三个CSS文件)。目标目录(即css目录)在每个任务执行之间从机器中删除。
这样，每次执行任务时，任务运行程序都需要写入磁盘。在解释以下数据的结果时要小心。许多因素都会影响结果，比如连接、缩小和报告执行速度的Grunt和Gulp插件之间的差异。
任务执行速度
| 测试1 | 915毫秒 |
| 测试2 | 941毫秒 |
| 测试3 | 908毫秒 |
| 测试4 | 994毫秒 |
| 测试5 | 938毫秒 |
| 平均时间 | 939.2毫秒 |
Gulp任务执行速度
| 测试1 | 229毫秒 |
| 测试2 | 229毫秒 |
| 测试3 | 226毫秒 |
| 测试4 | 225毫秒 |
| 测试5 | 221毫秒 |
| 平均时间 | 226毫秒 |
在这种特殊情况下，Gulp能够执行CSS优化任务快4倍比繁重。对于简单的任务，你永远不会注意到区别。但是对于需要几分钟才能完成的复杂的构建自动化任务，这可能是一个问题。
你不想等得太久。值得指出的是，有一个新版本的Grunt在路上。它也将使用Orchestrator。
这很可能会提高任务执行速度。看看这篇博客文章，Zander Martineau做了一个Grunt和Gulp的速度比较测试。他还提到Gulp比Grunt更快地完成任务。
来源:tech.tmw.co.uk
Grunt vs Gulp Stats
项目开始日期
Grunt项目始于2011年末。这个项目花了大约一年时间才引起人们的注意。由于它是第一个进入市场的，与Gulp相比，它有更大的用户基础。Gulp于2013年年中进入这个领域。它在2014年初才被注意到。从那以后，采纳者的数量一直在增加。
使用
为了了解有多少开发人员使用Grunt和Gulp，我们可以查看npm下载统计咕哝着说而且狼吞虎咽地吃包。由于下载grunt和/或gulp包是使用任务运行器的第一步，因此这是尝试量化有多少人使用grunt和gulp的一个不错的起点。
然而，从比较的角度来看，“下载”指标存在一些缺陷。有些开发人员可能同时使用Grunt和Gulp。与Grunt相比，Gulp发布了更多的版本更新，这可能会导致人们更新他们的软件，从而提高下载率。
这种测量只能说明问题的一部分。以下数据来自npm-stat-一个报告NPM包统计信息的工具。
呼噜声使用统计
| 总下载 | 1400万年 |
| 上个月的下载量 | 130万年 |
| 每日平均下载量 | 42075年 |
Gulp使用统计
| 总下载 | 590万年 |
| 上个月的下载量 | ~ 929000 |
| 每日平均下载量 | 32479年 |
插件数量
插件是任务配置的基础。
虽然您当然可以编写自己的流程来实现自动化，但是如果已经存在，那么使用已经存在的流程要容易得多。Grunt和Gulp在他们的网站上都有官方插件目录。的y both display the number of plugins listed in their respective plugin directories. Grunt has 4,663 plugins.
Gulp有1561个插件。显然，Grunt比Gulp有更多的插件3倍的插件相比之下，后者。请记住，Grunt有一个领先的开始，所以有更多的插件是可以期待的。
开发活动
当你依赖一款软件时，最好了解一下它的更新频率。
您希望使用的工具能够通过错误修复、安全漏洞补丁和特性增强而得到快速和持续的改进。通过查看Grunt和Gulp的GitHub存储库，我们可以深入了解这两个开源项目的开发活动水平。这是因为GitHub会显示提交、发布和贡献者的数量。
提交在源代码更新时发生。这可以很好地表明项目开发人员在修复bug和添加/改进功能时的活跃程度。在软件领域,释放指不同的发展阶段。
例如(使用语义版本控制约定)v1.0.0是第一个稳定版本。V2.1.2是一个更成熟的版本。发布的数量可以显示软件更新的频率。
当发现漏洞和其他问题时，它可以给我们一个关于项目开发人员反应如何的线索。贡献者是为项目贡献代码的辛勤工作的人。更多的GitHub用户对项目做出贡献可能意味着有更多的人审查项目的源代码，更多的人可以帮助开发项目，如果项目的创建者决定他们不再希望在项目上工作，那么有人可以/将接管项目的机会就会更大。
使用这些度量标准来度量软件开发活动的棘手之处在于，每个项目都可能有提交源代码和发布更新的独特策略。此外，他们可能有某些需求和指导方针，这些需求和指导方针会影响到为项目贡献代码的人员的数量。此外，随着开源项目的成熟，需要修复的bug和添加的功能自然会越来越少。因此，从理论上讲，提交和发布的速度会随着项目的老化而下降。
但至少我们可以通过这些数字粗略地了解Grunt和Gulp的开发人员更新各自回购协议的频率。
咕哝开发活动统计
| 提交 | 1310年 |
| 释放 | 8 |
| 贡献者 | 54 |
Gulp开发活动统计
| 提交 | 814 |
| 释放 | 14 |
| 贡献者 | 135 |
好消息是两者都有Grunt和Gulp是健康的在发展活动方面。在我写这篇文章的时候，Grunt在五天前有一个承诺，而Gulp在四天前有一个。
Grunt的最新版本发布于近11个月前。Gulp的最后一个版本是最近的，大约3个月前。他们最大的不同之处在于为项目做出贡献的开发人员的数量。
Gulp拥有2.5倍多的开发者在做项目。
受欢迎程度
在GitHub中，您可以通过查看Watch、Star和Fork指标来量化对存储库感兴趣的人数。的看metric是主动监控回购活动的GitHub用户的数量。
的明星metric是“收藏”存储库的GitHub用户的数量。的叉metric显示了将项目复制到自己GitHub帐户的GitHub用户的数量。这些指标可以让我们了解一个项目在GitHub上的受欢迎程度。
Grunt人气统计
| 观察人士 | 563 |
| 星星 | 9466年 |
| 叉 | 1120年 |
Gulp人气统计
| 观察人士 | 653 |
| 星星 | 13540年 |
| 叉 | 1240年 |
尽管Grunt比Gulp年龄大，但我们可以通过星星、观察者和叉子的数量来判断Gulp现在更流行。
数据源
数据来源于2015年5月11日。每日平均下载量是根据2015年5月1日至7日的数据计算出来的。来源:
- npm-stat:繁重
- npm-stat:吞咽
- 插件- Grunt: JavaScript任务运行器
- js插件注册表
- github.com/gruntjs/grunt
- github.com/gulpjs/gulp
结论
那么，你应该使用Grunt还是Gulp呢?老实说，这取决于你。这很难说。一个不比另一个好。
它们是同样类型的工具，可以做同样的工作。所以这取决于个人喜好。但让我和你分享一下我是如何使用咕噜的而且如果你想知道的话，喝一口吧，同时也说明你不必只效忠于其中一个。
我在我的Angular项目中使用Grunt。主要是因为AngularJS的Yeoman生成器插件脚手架我的应用程序只是我喜欢的方式。还有一个Gulp版本，generator-gulp-angular但是我不喜欢。
所以我在Angular项目中一直使用Grunt。如果需要，我会对我的任务配置进行一些小调整和更新。我主要在我的Laravel项目和一些小网站上使用Gulp。
基本上，如果我找不到适合我的Yeoman生成器，我就会使用Gulp从头开始制作。我认为，Gulp的使用和配置要简单得多。希望你在这里读到的信息能帮助你选择Grunt还是Gulp。
相关内容
- 从命令行接口开始
- 如何使用Gulp
- 用Grunt加快您的Web开发工作流
- 提高网站速度的现代方法
- 你最喜欢的开源工具是什么?
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
