javascript - Grunt 有什么用？

Question

我正在尝试接触 Grunt，这是我的新手，但我不了解它的实用性。

我知道这是一个taskrunner。我知道它可以用来做诸如 bundle、uglify、jshint、minify 等等之类的事情，任何可以变成脚本任务的事情。

但我看不出这有什么好处。无论如何，几乎所有这些都可以从命令行运行，也就是说您可以使用简单的 shell 脚本将它们组合起来。在我看来，设置 grunt + gruntfiles 和编写任务比编写 shell 脚本更多工作，而不是更少。

我错过了什么？

Answer 1

Grunt 基本上是一个在 NodeJS 之上编写的构建/任务管理器。我将其称为 Java 版 ANT 的 NodeJS 堆栈等价物。以下是您希望在以下情况下使用 grunt 的一些常见场景:

1. 您有一个项目，其中包含需要缩小的 javascript 文件，并且通常单独生成前端构建(以防您使用 JAVA 作为后端)。 (grunt-contrib-uglify)
2. 当您在开发过程中将代码保存在您的机器上时，您希望浏览器自动重新加载您的页面(这似乎是一件小事，但相信我，这为我节省了很多时间)。 (实时重新加载)
3. 当开发人员在他的机器上保存代码时，他希望显示 JS 错误/一般最佳实践违规的完整列表。 (grunt-contrib-jshint)
4. 你有一个包含 SASS/LESS 文件的项目，需要在开发过程中在开发人员的机器上编译成 CSS 文件，例如，每当他保存一个 SASS 文件时，你希望它自动编译成一个 CSS 文件，以便包含在你的页面中。 (grunt-contrib-sass)
5. 您有一组负责 UI 的前端开发人员和一组负责后端的后端开发人员，您希望前端开发人员使用后端 REST API，而不必每次都编译和部署代码在他们自己的机器上。如果您想知道，这对于典型的 Web 服务器设置是不可能的，因为浏览器不允许 XHR 跨域。 Grunt 可以为您设置一个代理，将您自己系统上的 XHR 请求在 grunt 连接服务器中重定向到另一个系统! (grunt-contrib-proxy, grunt-contrib-connect)

我不认为您的 shell 脚本可以完成所有这些。总而言之，是的，对于几乎没有接触过 javascript 的人/刚接触 nodeJS 的人来说，设置 Gruntfile.js 是乏味的，我经历了与学习者相同的痛苦，但 Grunt 是一个了不起的软件。一定要花时间为你的前端项目设置一个合适的 Gruntfile.js，你会感谢上帝让你的生活变得更轻松:)

与 shell 脚本相比的优势:

1. 如果您为这些任务中的每一项都编写 shell 脚本，那么维护然后根据您的每一项需求进行自定义是很乏味的。 Gruntfile.js 实际上非常简单。您可以使用一个配置对其进行初始化，指定您要执行的任务、每个任务的源和目标。

2. 与 Yeoman、Gulp 上的项目种子生成器集成是另一个需要考虑的主要因素。 Yeoman 和 Gulp 带有带有智能默认值的 Gruntfile.js。对于团队中唯一的 UI 贡献者来说，这对我来说是无价的!

3. 对于从事前端技术工作的人来说，如果你有不止一个人与你一起工作，他们很容易了解 Grunt，Grunt 已经有很多关于 SO 的答案，而不是了解您的 shell 脚本。这可能是大型团队的一个因素。

4. Grunt 的众多插件扩展了基本功能。除非您的 shell 脚本非常流行并且非常模块化，否则我看不到为它构建的插件。这也扩展到在您的项目中包含新的前端技术。比如说，如果你明天想在你的项目中使用 typescript ，你的 shell 脚本将需要合并它并用你自己的努力来解释它。使用 Grunt，就像“npm install”和添加配置一样简单。