npm、bower、gulp、Yeoman和grunt有什么作用？

Question

我是一名后端开发人员，对于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的对应物

我接近正确吗？ :)

- Christian

---

这是一个非常好的问题。像我这样的极客开发人员和想要在2017年加入Web开发游戏的许多人们都会考虑这个问题。 - Cheung

Answer 1

你离成功不远了！欢迎进入JavaScript世界 :)

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

bower 专注于在浏览器中使用的包。每个 bower install <packagename> 只指向需要包含的一个文件（可以下载更多）。由于 webpack、browserify 和 babel 的成功，它现在基本上已经过时了，不能作为第一类依赖管理器。

2018年更新：bower 已经被NPM所取代。

npm 历史上主要关注NodeJS代码，但已经取代了 bower 成为浏览器模块的首选。别让任何人骗你：npm 很强大。npm 也会将许多文件加载到您的项目中，而新的 npm 安装始终是冲泡一杯咖啡的好理由。npm 易于使用，但由于引用版本的宽松性和模块发布的随意性，可能会在更改环境时破坏您的应用程序。请查阅 Shrink Wrap 和npm install --save-exact 了解更多信息。

2018年更新：NPM变得更加成熟！在安全性和可重复性方面实现了许多改进。

grunt 方便任务自动化。Gulp 的老哥，但运行速度较慢。2014年，JavaScript 社区很喜欢它。对于一些地方来说，Grunt 已经被认为是遗留的技术，但仍然可以找到大量真正强大的自动化功能。对于大型用例来说，配置可能非常麻烦。不过，有一个grunt模块可以处理这个问题。

2018年更新：grunt 已经基本被淘汰。编写简单的webpack配置已经取代了它。

gulp 与 Grunt 相同，但速度更快。

npm run-script你可能完全不需要任务运行器。NodeJS脚本非常容易编写，所以大多数用例都可以使用自定义任务自动化工作流程。使用npm run-script从您的package.json文件上下文中运行脚本。 webpack 不要错过webpack。特别是如果您在许多将JavaScript编写为连贯模块化代码的方式中感到迷茫。Webpack将.js文件打包成模块并且表现出色。Webpack高度可扩展，并提供良好的开发环境：webpack-dev-server。与babel一起使用，可以获得迄今为止最好的JavaScript体验。 Yeoman 脚手架。对于具有不同背景的团队来说非常有价值，因为它为您的项目架构提供了可控的共同基础。甚至还有一个脚手架生成器。

- Mirko

Answer 2

所以，既然你已经很清楚每个工具都是干什么用的了，我将给你提供一个简单的流程。

1. 我使用yeoman搭建基本骨架。
2. 我使用node作为应用程序的运行时。 比如运行node appname
3. 我使用npm安装node模块来帮助我在node中编写应用程序。
4. 可能需要从bower获取一些组件，例如前端库，因此使用bower来获取这些组件。
5. 现在为了执行一些重复任务，我会使用grunt或gulp来编写任务。 因此，每次我想要重复它，例如缩小我的js文件，我就调用grunt/gulp让它们完成。 你问有什么区别，Gulp是基于流的，而Grunt是基于任务的。
6. 我使用git进行版本控制以跟踪更改

- JoviaArk

Answer 3

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

   • Grunt侧重于配置，而Gulp侧重于代码
   • Grunt围绕一组内置的常用任务构建，而Gulp则是以强制不做限制，只关注如何将社区开发的微型任务连接在一起的理念在此阅读

---

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

---

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

   Git将其数据视为一组小型文件系统的快照。每次您在Git中提交或保存项目状态时，它基本上会拍摄此刻所有文件的样子，并存储对该快照的引用。

   在Git中执行操作时，几乎所有操作都只会向Git数据库添加数据。很难让系统执行任何不可撤消的操作或以任何方式擦除数据。就像在任何版本控制系统中一样，您可能会丢失或弄乱尚未提交的更改；但是，在将快照提交到Git后，很难丢失它，特别是如果您定期将数据库推送到另一个存储库。

   阅读更多

---

4. Bower vs NPM：Bower和NPM都是依赖管理器，但Bower模块用于前端开发。NPM是一组可与NodeJS后端一起使用的大型模块集合。这个SO答案更好地解释了它。

- Amresh Venugopal

---

听起来有点像 gulp vs. grunt 就像 ant (或 gradle) vs. maven 一样... 感谢您的回答！ :) - Christian

Answer 4

我添加了一些细节：

npm 是 JavaScript 的包管理器，npm 是 Node.js 的包生态系统，但它仅适用于前端项目。

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

关于 gulp、grunt 和 bower 之间的区别，已经有一个票：Grunt、Gulp.js 和 Bower 之间的区别是什么？何时使用它们？

Node.js 更多地是一个 JavaScript 运行时。Node.js 允许使用 JS 和一组“模块”创建 Web 服务器和网络工具，这些模块处理各种核心功能和其他核心函数。来源

这张票据概述了Git和Subversion之间的区别：为什么Git比Subversion更好？

- Giu