Grunt、Gulp.js和Bower有什么区别？何时使用它们？

Question

Grunt、Gulp.js 和 Bower 之间有什么区别？为什么要使用它们？何时以及如何使用它们？

我发现现在大多数前端项目都使用以上工具，虽然我最近的项目中也在使用 gulp 构建 HTML、CSS 和 JavaScript，像这样的脚本:

$ gulp build

但是我对所有这些前端框架都不太了解，希望你能帮助我对Grunt、Gulp.js和Bower有一个总体的理解。

- Subodh Ghulaxe

---

为什么要用 sudo？这对我来说似乎不是一个好主意。 - Walter Tross

@WalterTross 有时候 npm 权限会出问题（参考：https://docs.npmjs.com/getting-started/fixing-npm-permissions），导致 gulp 任务无法运行 npm（例如：https://www.npmjs.com/package/gulp-npm-run）。 - edin-m

@WalterTross 我猜 sudo 是给 Mac 用户用的。 - Santosh

Answer 1

简而言之，通过手动抛弃细节，Gulp 和 Grunt 都是用于自动化互相依赖的任务序列的系统，通常用于定义项目的“构建”（build）过程，类似于现代化的 make 工具。通常情况下，一个项目使用其中一个系统，而不会同时使用两个（无论部分是否相同）。

Bower 不同，并且经常与 Gulp 或 Grunt 一起使用：它是一个客户端库的包管理器，使得很容易按照标准化的方式来更新这些库、指定它们及其依赖项等。

Gulp 的一句话介绍来自他们网站上：

自动化和增强您的工作流程

Grunt 的一句话介绍来自他们的网站：

JavaScript 任务运行器

而 Bower 则是：

Web 的包管理器

---

为什么以及何时使用它们？

我认为，对于 Gulp 和 Grunt 来说，以上内容已经涵盖了这一点：如果您有需要自动化的任务（例如，使用缩小、合并、压缩等方式构建网站的发布版本；或者监视文件变化并在变化时重新运行任务以支持快速开发），您可以使用 Gulp 和 Grunt 来完成此项工作。

但不仅仅是构建。您可以使用 Gulp 和 Grunt 来自动化任何一系列需要自动化的任务。

Bower是用于管理项目中客户端库的有用工具。您可以使用Bower安装最新版本的Bootstrap，它会将相关文件放置在您项目的标准位置。如果出现更新的Bootstrap版本，Bower可以更新这些文件。如果一个库依赖于其他库（例如，Bootstrap的JS依赖于jQuery），Bower可以帮助管理该依赖树。对于Grunt（我假定也适用于Gulp），有一些有用的任务可以自动将脚本和链接标签添加到您的HTML中，只需在源HTML中使用占位符即可，它基本上表示“将Bower库放在这里”。

- T.J. Crowder

---

嗨@T.J. Crowder 请问一下，如果Bower是一个客户端的包管理器，我们如何将其与NuGet区分开来，因为我们也可以通过它添加客户端或服务器端的库。 - sam

@sam：Bower 是关于客户端包的。据我所知，NuGet 是 VS.Net 的包管理器；VS.Net 可用于构建客户端和服务器端的东西。我不知道 NuGet 中是否有纯粹用于基于浏览器的使用的内容。 - T.J. Crowder

Answer 2

gulp 和 Grunt 都是任务运行器，它们是解决同一个问题的不同方法。 Grunt 使用基于配置的方法，而 gulp 则使用来自 node 的流来实现结果。你可以使用它们来定义如何以及执行哪些任务（复制文件、添加标识、替换文本、检查样式等）。它们（通常）从命令行手动运行。

例如，如果要复制和修改文件，则 Grunt 会创建中间文件，而 gulp 则会利用 node 的流并实时转换。

何时使用 Grunt 或 gulp 没有具体的答案，因为它取决于个人偏好、技术支持（某些任务的插件）、项目特定性和配置的易用性。两者都相对容易上手，但通常你会选择适合项目所用技术栈的更好插件的其中一种（虽然两者都有良好的插件支持）。

Bower 是包管理器，用于安装 JavaScript（主要是客户端）包（但是 npm - 也是包管理器 - 同样包含几乎所有这些模块/包）。你可以使用它来自动管理依赖和安装包。

- edin-m

Answer 3

继T.J. Crowder的帖子之后，Bower与NPM、Composer或Gem非常相似。 NPM和Bower之间最大的区别在于，Bower用于前端包，而NPM（曾经）用于后端包。 现在，NPM既可以处理前端包也可以处理后端包。
此外，您需要使用NPM来安装Bower。

Grunt是最先推出的前端任务自动化工具之一。 它比当时提供的其他工具提供了更好的体验。 它仍然拥有庞大的追随者群体和活跃的社区。

Gulp从某种程度上来自于grunt，并通过使用流而不是文件进行改进。

Grunt会将更改写入文件，然后加载该文件以进行更多操作。 Gulp读取文件并对数据流执行所有转换，只有在完成所有操作后才进行写入。 这意味着它是异步的，比grunt更快。 我认为在新项目中应该使用Gulp代替grunt。
可能存在一些优秀的用例，其中grunt的性能优于gulp，但通常gulp更快。

- Pjetr

Answer 4

我刚完成了对Gulp和Grunt（我们以前的标准）的分析，虽然我认为这两者都是前端开发人员需要掌握的重要知识，并且它们都是很好的解决方案，但出于以下原因，我倾向于在未来的项目中使用Gulp：

1. Gulp通常更简洁易读（插件只做一件事情和流式处理方法）。我重写的一个Grunt脚本在Gulp中只用了四分之一的代码行数才能得到相同的结果。

2. Gulp通常更快。

3. 虽然Gulp插件较少且文档较薄，但关键插件（如缩小、合并、列出、LESS转换等）目前已经可用且运行良好。

- Anish Rai