Grunt、Gulp.js 和 Bower 有什么区别?为什么&什么时候使用它们?

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

我现在看到，大多数前端项目都使用上述工具，虽然我在使用它们就像在我最近的项目中一样，我正在使用 gulp 使用像

这样的脚本来构建 HTML、CSS 和 JavaScript

$ gulp build

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

解决方案

在本质上和很多细节上，Gulp 和 Grunt 都是用于自动执行一系列相互依赖的任务的系统，通常用于定义项目的构建"，例如现代风格在 make 工具上.通常，一个项目使用其中一个或另一个，但不能同时使用两者(无论如何，对于相同的部分).

Bower 不同，它经常与 Gulp 或 Grunt 一起使用:它是客户端库的包管理器，易于维护这些库是最新的，以标准化的方式指定它们及其依赖项，等等.

他们网站上的 Gulp 单线:

<块引用>

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

他们的 Grunt 单线:

<块引用>

JavaScript 任务运行器

还有鲍尔:

<块引用>

网络包管理器

<小时><块引用>

为什么&什么时候用?

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

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

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

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

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 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.

解决方案

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

Bower is 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.

The Gulp one-liner from their website:

Automate and enhance your workflow

The Grunt one-liner from theirs:

The JavaScript Task Runner

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.

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

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."