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

What are the differences between Grunt, Gulp.js and Bower? Why & when to use them?

提问by Subodh Ghulaxe

What are the differences between Grunt, Gulp.js and Bower? Why & when and how to use them?

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

I've seen nowadays, most of the front-end project using the above tools, though I am using them like in my recent project I am using gulp to build HTML, CSS and JavaScript using a script like

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

$ gulp build

but don't have much understanding of all these front-end frameworks, please help me get an overall understanding of Grunt, Gulp.js and Bower.

但是对这些前端框架都不太了解，请大家帮我全面了解Grunt、Gulp.js和Bower。

回答by T.J. Crowder

In essence and with a lot of hand-waving away of details, Gulpand Gruntare both systems for automating serieses of inter-dependent tasks, commonly used for defining the "build" of your project, like a modern take on the maketool. Typically a project uses one of them or the other, but not both at the same time (for the same parts, anyway).

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

Boweris different, and frequently used with either Gulp or Grunt: It's a package manager for client-side libraries, making it easy to keep those libs up to date, specify them and their dependencies in a standardized way, and so forth.

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

The Gulp one-liner from their website:

他们网站上的 Gulp one-liner：

Automate and enhance your workflow

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

The Grunt one-liner from theirs:

他们的 Grunt one-liner：

The JavaScript Task Runner

JavaScript 任务运行器

And Bower:

还有鲍尔：

A package manager for the web

网络包管理器

---

---

Why & when to use them?

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

I think the above covers that for Gulp and Grunt: If you have tasks you want to automate (like building the release version of a website with minification, concatenation, compression, etc.; or watching files for changes and re-running tasks when they change to support rapid development), you can use Gulp and Grunt for that.

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

But it's not just builds. You can use Gulp and Grunt for any series of tasks that you need to automate.

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

Bower is useful for managing the client-side libraries in your projects. You can use Bower to install, say, the latest version of Bootstrap, and it will put the relevant files in standard locations in your project. Bower can update those files if a newer Bootstrap comes out. If a library depends on other libraries (Bootstrap's JS relies on jQuery, for instance), Bower helps manage that tree. There are helpful tasks for Grunt (and I assume for Gulp) that can even automate adding the script and link tags to your HTML for those libraries, by having a placeholder in your source HTML that basically says "put the Bower libs here."

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

回答by edin-m

gulpand Gruntare task runners. They are different approaches to same problem. Gruntuses configuration based approach, while gulpuses streams from nodeto achieve result. You use them to define how and which tasks to execute (copying files, adding banners, replacing text, style checking, etc...). They are (usually) run from command line, manually.

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

For example, if copying and modifying files Gruntwill create intermediate files and gulpwill leverage node's streams and transform on the fly.

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

When to use Gruntor gulpis less specific answer because it takes into account personal preference, technology support (plugins for certain tasks), project specifics, and ease of configuration. Both are relatively easy to get up and running, but usually you will end up choosing one which has better plugins for technology stack used for your project (although both have good plugins support).

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

Boweris package manager. It's used to install javascript (mostly client side) packages (however npm- also packet manager - also contains almost all of those modules/packages. You use it to automatize dependency management and package installing.

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

回答by Pjetr

to continue on the post of T.J. Crowder, Bower is quite similar to NPM, or Composer or Gem. The biggest difference between NPM and Bower, is that bower is for frontend packages, while NPM (used to be) for backend packages. NPM now does frontend packages as well as backend packages.
Also, you need NPM to install Bower.

继续担任 TJ Crowder 的职位，Bower 与 NPM、Composer 或 Gem 非常相似。NPM 和 Bower 之间最大的区别在于，bower 用于前端包，而 NPM（曾经）用于后端包。NPM 现在做前端包和后端包。
此外，您需要 NPM 来安装 Bower。

Grunt was the first of these frontend task automaters that was available. It gave a better experience than what was available at the time. It still has a big following and active community.

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

Gulp came from grunt, in a way, and improves on it by using streams, not files.

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

Grunt writes changes to a file, and loads in that file to manipulate some more. Gulp reads a file, and does all transformations on the datastream, and only writes once all manipulations have been done. It means it's async and faster than grunt. And I believe Gulp should be used for new projects in favor of grunt.
There are probably great use cases where grunt preforms better than gulp, but usually gulp is faster.

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

回答by Anish Rai

I just completed an analysis of Gulp vs Grunt (our prior standard) and although I think both are important to know for a front end developer to be current and both are good solutions I learn towards Gulp for future projects for the following reasons:

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

1. Gulp is generally more concise (plugins doing one thing only and streams approach) and readable. One Grunt script that I redid in Gulp resulted in only one quarter the lines of code to produce the same result.

2. Gulp is faster in general.

3. Although Gulp has fewer plugins and thinner documentation key plugins for minification, concatenation, listing, LESS transpilation, and so forth are currently available and work well.

1. Gulp 通常更简洁（插件只做一件事，流方法）和可读性更强。我在 Gulp 中重做的一个 Grunt 脚本导致只有四分之一的代码行产生相同的结果。

2. Gulp 通常更快。

3. 尽管 Gulp 有更少的插件和更薄的文档关键插件，用于缩小、连接、列表、LESS 转译等目前可用并且运行良好。