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

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

本文关键字：为什么 amp 何时使区别什么 js Gulp Bower 之间 Grunt 更新时间：2023-09-26

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-lib放在这里"。

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

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

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

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

继续T.J.Crowder的帖子，Bower与NPM、Composer或Gem非常相似。NPM和Bower最大的区别在于，Bower用于前端包，而NPM（过去）用于后端包。NPM现在做前端包和后端包
此外，您需要NPM来安装Bower。

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

在某种程度上，咕噜声来自咕噜声，并通过使用流而不是文件来改进它。

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

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

Gulp通常更简洁（插件只做一件事，流方法）和可读性更强。我在Gulp中重新编写的一个Grunt脚本只产生了四分之一的代码行，就产生了相同的结果。
一般来说，打嗝更快。
尽管Gulp的插件更少，文档也更薄，但用于缩小、串联、列表、较少编译等的关键插件目前可用，并且运行良好