npm、bower、gulp、Yeoman 和 grunt 有啥用？

Posted 2023-03-06

【中文标题】npm、bower、gulp、Yeoman 和 grunt 有啥用？

【英文标题】：What are npm, bower, gulp, Yeoman, and grunt good for?npm、bower、gulp、Yeoman 和 grunt 有什么用？

【发布时间】：2016-08-15 18:50:23

【问题描述】：

我是一名后端开发人员，对 npm、bower、gulp、grunt 和 Yeoman 有点困惑。每当我问某人他们的目的是什么时，答案往往归结为依赖管理器——对所有人来说。当然，我们不需要四种不同的工具来做同样的事情吗？

有人可以用尽可能少的句子解释每一个的好处吗？如果可能的话，每个工具只用一个，使用五岁（具有开发技能）可以理解的语言？

例如：

SVN

存储、管理和跟踪我们源代码的更改

我过去使用过 maven、Jenkins、nexus 和 ant；也许您可以将上面的工具与这些工具进行比较？

还可以随意将其他前端工具添加到列表中。

这是我目前发现的——但不确定它是否正确：

bower

前端开发/JS 库的依赖管理器，使用平面依赖列表

npm

node.js 服务器的依赖管理器，可以解析传递依赖/依赖树

grunt

运行任务，很像 Jenkins，但在命令行上进行本地化

Yeoman

提供了脚手架，即骨架项目

gulp

与 grunt 相同，但仅用 js 编写

node.js

用于 js 应用的服务器？

git

去中心化 SCM/VCS，对应 svn/cvs

我接近了吗？ :)

【问题讨论】：

这是一个很好的问题。我以为很多人和我一样都是极客开发者，想在 2017 年加入 Web 开发游戏。

【参考方案1】：

你已经接近了！ 欢迎使用 javascript :)

让我给你一个简短的描述和一个大多数开发人员会花一些时间使用的功能。

凉亭 专注于浏览器中使用的包。每个bower install <packagename> 都指向一个要包含的文件（可以下载更多文件）。由于 webpack、browserify 和 babel 的成功，它作为一流的依赖管理器已经过时了。

2018 年更新：bower 大部分被弃用，取而代之的是 NPM

npm 历史上专注于 NodeJS 代码，但已经推翻了浏览器模块的凉亭。不要让任何人愚弄你：NPM 是巨大的。 NPM 还会将许多文件加载到您的项目中，并且新的 npm 安装始终是煮一杯新咖啡的好理由。 NPM 易于使用，但由于引用版本的松散方式和模块发布的随意性，可能会在更改环境时破坏您的应用程序。研究Shrink Wrap和npm install --save-exact

2018 更新：NPM 长大了！在安全性和可重复性方面进行了许多改进。

咕哝 促进任务自动化。大口大口地吞了口口水，有些呆滞的哥哥。 JavaScript 社区过去经常和他一起在 2014 年闲逛。 Grunt 在某些地方已经被认为是遗留问题，但仍有大量真正强大的自动化功能有待发现。对于更大的用例，配置可能是一场噩梦。 There is a grunt module for that though.

2018 年更新：grunt 基本上已经过时了。易于编写的 webpack 配置已经杀死了它。

一饮而尽 与 grunt 执行相同的操作，但速度更快。

npm 运行脚本 您可能根本不需要任务运行器。 NodeJS 脚本非常容易编写，因此大多数用例都允许自定义任务自动化工作流程。使用 npm run-script 从 package.json 文件的上下文中运行脚本

网络包 不要错过 webpack。特别是如果您对将 JavaScript 编写成连贯模块化代码的多种方式感到迷茫。 Webpack 将 .js 文件打包成模块，做得非常出色。 Webpack 具有高度可扩展性并且也提供了良好的开发环境：webpack-dev-server 与 babel 结合使用可获得迄今为止最好的 JavaScript 体验。

约曼 脚手架。对于具有不同背景的团队来说非常有价值，因为它为您的项目架构提供了一个可控的共同点。甚至还有scaffolding for scaffolds。

【参考方案2】：

所以，既然你很清楚每个是什么，我会给你一个简单的工作流程。

我使用 yeoman 搭建一个基本骨架。 我使用 node 作为我的应用程序的运行时。 IE。运行node appname 我使用 npm 安装 node 模块来帮助我在 node 中编写应用程序 我可能需要一些来自 bower 的组件，比如前端库，所以请使用 bower 来获取这些。 现在要执行一些重复性任务，我将使用 grunt 或 gulp 来编写一些任务。所以每次我想重复它时，说最小化我的 js 文件，我调用 grunt/gulp 并让他们这样做。您问的不同之处在于，Gulp 是基于流的，而 grunt 是基于任务的。 我使用 git 进行版本控制以跟踪更改

【参考方案3】：

Gulp 与 Grunt：Gulp 通过任务自动化提供了更大的灵活性，Grunt 根据常见的开发实践内置了许多功能。 Grunt 和 Gulp 之间有两个主要区别：

Grunt 专注于配置，而 Gulp 专注于代码 Grunt 是围绕一组内置的、常用的任务构建的，而 Gulp 的想法是什么都不执行，而是社区开发的微任务应该如何相互连接Read here

---

NodeJS：它是一种非阻塞服务器端脚本语言。这意味着在当前操作完成之前，操作不会阻止进一步的执行。

---

Git：正如您所提到的，它是一种 SCM 工具，一种广泛使用的工具。根据 GitHub 文档，它与其他 SCM 工具不同，因为数据永远不会被删除。

Git 认为它的数据更像是一组迷你文件系统的快照。每次您在 Git 中提交或保存项目状态时，它基本上都会拍摄您当时所有文件的样子，并存储对该快照的引用。

当您在 Git 中执行操作时，几乎所有操作都只会将数据添加到 Git 数据库。让系统做任何不可撤销的事情或以任何方式使其擦除数据是非常困难的。与任何 VCS 一样，您可能会丢失或弄乱尚未提交的更改；但是在将快照提交到 Git 之后，很难丢失，尤其是如果您定期将数据库推送到另一个存储库。

Read More

---

Bower 与 NPM：Bower 和 NPM 是依赖管理器，但 Bower 模块用于前端开发。 NPM 是与 NodeJS 后端一起使用的大量模块集合。 This SO answer covers it better

【讨论】：

听起来有点像 gulp vs. grunt 类似于 ant (或 gradle) vs maven ...感谢您的回答！ :)

【参考方案4】：

我添加了一些细节：

npm是javascript的包管理器，npm是nodejs的包生态，但只能用于前端项目。

grunt 和 gulp 对于分离和自动化任务（如在命令行上的缩小、编译、单元测试）很有用，它比（例如）Visual Studio 更轻量级的解决方案因为该进程只是一个单独的（通常是轻量级的）命令行/进程。

关于 gulp、grunt 和 bower 之间的区别已经有一张票了：What are the differences between Grunt, Gulp.js and Bower? Why & when to use them?

Nodejs 更像是一个 javascript runtime。 Node.js 允许使用 js 和处理各种核心功能和其他核心功能的“模块”集合创建 Web 服务器和网络工具。 Source

这张票恢复了 Git 和 Subversion 之间的差异：Why is Git better than Subversion?