Grunt、Gulp.js 和 Bower 有啥区别？为啥以及何时使用它们？

Posted 2023-02-23

【中文标题】Grunt、Gulp.js 和 Bower 有啥区别？为啥以及何时使用它们？

【英文标题】：What are the differences between Grunt, Gulp.js and Bower? Why & when to use them?Grunt、Gulp.js 和 Bower 有什么区别？为什么以及何时使用它们？

【发布时间】：2016-03-21 03:27:52

【问题描述】：

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

我现在看到，大多数前端项目都使用上述工具，虽然我在最近的项目中使用它们，但我正在使用 gulp 使用类似脚本的脚本构建 html、CSS 和 javascript

$ gulp build

但是对所有这些前端框架了解不多，请帮我对Grunt、Gulp.js和Bower有一个整体的了解。

【问题讨论】：

为什么是sudo？在我看来这不是一个好主意

@WalterTross 有时npm 权限是screwed 和gulp 任务可能会运行npm (ex)

@WalterTross sudo 我猜是 Mac 用户。

【参考方案1】：

我刚刚完成了对 Gulp 与 Grunt（我们之前的标准）的分析，尽管我认为这两者对于前端开发人员来说都很重要，并且两者都是很好的解决方案，但我为未来的项目学习 Gulp，原因如下：

Gulp 通常更简洁（插件只做一件事和流方法）和可读性。我在 Gulp 中重新编写的一个 Grunt 脚本只产生了四分之一的代码行来产生相同的结果。

Gulp 通常更快。

尽管 Gulp 的插件更少且文档更精简，但用于缩小、连接、列表、LESS 转译等的关键插件目前可用且运行良好。

【参考方案2】：

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

例如，如果复制和修改文件 Grunt 将创建中间文件，gulp 将利用 node 的流并动态转换。

何时使用Grunt 或gulp 的答案不太具体，因为它考虑了个人偏好、技术支持（某些任务的插件）、项目细节和易于配置。两者都相对容易启动和运行，但通常您最终会选择一个具有更好的插件用于您的项目的技术堆栈（尽管两者都具有良好的插件支持）。

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

【参考方案3】：

从本质上讲，Gulp 和 Grunt 都是用于自动执行一系列相互依赖的任务的系统，并且很多细节都被抛在脑后，通常用于定义项目的“构建”，例如make 工具的现代风格。通常，一个项目使用其中一个或另一个，但不能同时使用两者（无论如何，对于相同的部分）。

Bower 不同，它经常与 Gulp 或 Grunt 一起使用：它是客户端库的包管理器，可以轻松保持这些库的最新状态，以标准化的方式指定它们及其依赖项，并且以此类推。

他们网站上的 Gulp one-liner：

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

他们的 Grunt 单线：

JavaScript 任务运行器

还有鲍尔：

网络包管理器

---

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

我认为以上内容适用于 Gulp 和 Grunt：如果您有想要自动化的任务（例如构建具有缩小、连接、压缩等的网站的发布版本；或者查看文件以进行更改并重新运行当任务发生变化以支持快速开发时），您可以使用 Gulp 和 Grunt。

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

Bower 可用于管理项目中的客户端库。你可以使用 Bower 来安装最新版本的 Bootstrap，它会将相关文件放在项目的标准位置。如果出现更新的 Bootstrap，Bower 可以更新这些文件。如果一个库依赖于其他库（例如，Bootstrap 的 JS 依赖于 jQuery），Bower 会帮助管理该树。 Grunt 有一些有用的任务（我假设是 Gulp），它甚至可以自动将脚本和链接标签添加到这些库的 HTML 中，方法是在源 HTML 中有一个占位符，基本上说“把 Bower 库放在这里”。 /p>

【讨论】：

嗨@T.J. Crowder 你能否澄清一下如果 Bower 是一个客户端包管理器，我们如何将它与 nuget 区分开来，因为我们还可以通过它添加客户端或服务器端库。

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

【参考方案4】：

继续担任 T.J. Crowder、Bower 与 NPM、Composer 或 Gem 非常相似。 NPM 和 Bower 最大的区别在于，bower 用于前端包，而 NPM（过去是）用于后端包。 NPM 现在既可以做前端包，也可以做后端包。 另外，你需要 NPM 来安装 Bower。

Grunt 是这些可用的前端任务自动化程序中的第一个。它提供了比当时可用的更好的体验。它仍然拥有大量的追随者和活跃的社区。​​p>

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

Grunt 将更改写入文件，并加载到该文件中以进行更多操作。 Gulp 读取文件，并对数据流进行所有转换，并且仅在完成所有操作后才写入。 这意味着它是异步的并且比 grunt 更快。而且我相信 Gulp 应该用于支持 grunt 的新项目。 可能有很多很好的用例，其中 grunt 预成型比 gulp 更好，但通常 gulp 更快。