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

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

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

我现在看到,大多数前端项目都使用上述工具,虽然我正在使用它们,就像在我最近的项目中我正在使用 gulp 构建 HTML,CSS 和 JavaScript 使用像

这样的脚本
$ gulp build

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

从本质上讲,Gulp and Grunt 都是用于自动执行一系列相互依赖的任务的系统,通常用于定义项目的 "build",就像 make 工具的现代版本。通常一个项目使用其中之一,但不会同时使用两者(无论如何,对于相同的部分)。

Bower 不同,并且经常与 Gulp 或 Grunt 一起使用:它是客户端库的包管理器,可以很容易地使这些库保持最新,指定它们并它们以标准化方式的依赖关系,等等。

他们网站上的 Gulp 一行:

Automate and enhance your workflow

他们的 Grunt 单行代码:

The JavaScript Task Runner

还有鲍尔:

A package manager for the web


Why & when to use them?

我认为以上涵盖了 Gulp 和 Grunt 的内容:如果您有想要自动化的任务(例如使用缩小、串联、压缩等构建网站的发布版本;或查看文件用于更改和重新 运行 任务(当它们更改以支持快速开发时),您可以使用 Gulp 和 Grunt。

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

Bower 对于管理项目中的客户端库很有用。您可以使用 Bower 安装最新版本的 Bootstrap,它会将相关文件放在项目的标准位置。如果更新的 Bootstrap 出现,Bower 可以更新这些文件。如果一个库依赖于其他库(例如 Bootstrap 的 JS 依赖 jQuery),Bower 会帮助管理该树。 Grunt 有一些有用的任务(我假设 Gulp)甚至可以自动将脚本和 link 标签添加到这些库的 HTML,方法是在源 HTML 基本上就是 "put the Bower libs here."

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

例如,如果复制和修改文件 Grunt 将创建中间文件,而 gulp 将利用 node 的流并即时转换。

何时使用 Gruntgulp 是不太具体的答案,因为它考虑了个人偏好、技术支持(用于某些任务的插件)、项目细节和配置的难易程度。两者都相对容易上手 运行ning,但通常你最终会选择一个具有更好的插件用于你的项目的技术栈(尽管两者都有很好的插件支持)。

Bower 是包管理器。它用于安装 javascript(主要是客户端)包(但是 npm - 也是包管理器 - 也包含几乎所有这些 modules/packages。你用它来自动化依赖管理和包安装。

继续 post T.J。 Crowder、Bower 与 NPM 或 Composer 或 Gem 非常相似。 NPM 和 Bower 之间最大的区别是,Bower 用于前端包,而 NPM(曾经)用于后端包。 NPM 现在做前端包和后端包。
另外,你需要 NPM 来安装 Bower。

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

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

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

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

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

  2. Gulp 通常速度更快。

  3. 虽然 Gulp 有更少的插件和更薄的文档,但用于缩小、串联、列表、LESS 转译等的关键插件目前可用并且运行良好。