Javascript Grunt 有什么用？

What is Grunt for?

提问by temporary_user_name

I'm trying to get into Grunt, which I am new to, but I do not understand its utility.

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

I understand that it is a taskrunner. I understand that it can be used to do things like bundle, uglify, jshint, minify, etc etc etc, anything that can be turned into a scripted task.

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

But I don't see what advantage this gives. Nearly all of these can be run from the command line anyway, which is to say you could just combine them using a simple shell script. It seems to me that setting up grunt + gruntfiles and writing tasks is morework than writing a shell script, rather than less.

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

What am I missing about this?

我错过了什么？

回答by shashanka n

Grunt is basically a build / task manager written on top of NodeJS. I would call it the NodeJS stack equivalent of ANT for Java. Here are some common scenarios you would want to use grunt under:

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

1. You have a project with javascript files requiring minification, and generally generating a front end build seperately (in case you're using say JAVA for your backend). (grunt-contrib-uglify)
2. When you save code on your machine during development, you want the browser to reload your page automatically (might seem like a small thing, but believe me this has saved me lots of time). (Live reload)
3. When a developer saves code on his machine, he wants a comprehensive list of JS errors / general best practice violations to be shown. (grunt-contrib-jshint)
4. You have a project with SASS/ LESS files which need to be compiled to CSS files on the developers machine during development, For example whenever he saves a SASS file, you want it to be compiled to a CSS file automatically, for inclusion in your page. (grunt-contrib-sass)
5. You have a team of front end developers who're working on the UI, and a team of backend developers working on the backend, you want the front end devs to use the backend REST API's without having to compile & deploy code everytime on their own machines. In case you were wondering, this isn't possible with a typical web server setup because XHR isn't allowed to be cross-domain by browser. Grunt can setup a proxy for you redirecting XHR requests on your own system within the grunt connect server to another system! (grunt-contrib-proxy, grunt-contrib-connect)

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

I do not think your shell script can do ALL of these. To summarize, yes, setting up a Gruntfile.js is tedious for someone who has had little exposure to javascript / is new to nodeJS, I went through the same pains as a learner, but Grunt is an amazing piece of software. DO invest the time to setup a proper Gruntfile.js for your front end project, and you'll thank god for making your life a lot easier :)

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

The Advantage vs shell script:

优势与 shell 脚本：

1. If you write shell script for every one of these tasks, it is tedious to maintain and then customize for every one of your needs. Gruntfile.js is actually pretty easy. there is a config that you init it with, specifying what tasks you want to perform, the sources and targets for each.

2. The integration with project seed generators on Yeoman, Gulp is another major factor to consider. Yeoman and Gulp come with Gruntfile.js' with intelligent defaults. For someone who is the sole UI contributor on his team, this is priceless to me!

3. For someone who is working on frontend technologies, if you have more than one person working with you, its rather easy for them to get to know Grunt, which is already well documented with a lot of answers on SO, than to get to know your shell scripts. This might be a factor in large teams.

4. The numerous plugins for Grunt extend base functionality. Unless your shell script is VERY popular, and VERY modular, I dont see plugins being built for it. This also extends to inclusion of new front end technologies in your project. Say, if you want to use typescript in your project tomorrow, your shell script will need to incorporate this and account for it with your own effort. With Grunt, its just as simple as "npm install " and adding a config.

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

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

3. 对于从事前端技术工作的人来说，如果您有不止一个人与您一起工作，那么他们了解 Grunt 会比了解您的外壳脚本。这可能是大型团队的一个因素。

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

回答by Miguel Gamboa

Even though I agree with most advantages pointed in Accepted Answer, I still have to consider the disadvantages that are highlighted by Keith Cirkel in Why we should stop using Grunt & Gulp

尽管我同意Accepted Answer 中指出的大多数优点，但我仍然必须考虑 Keith Cirkel 在为什么我们应该停止使用 Grunt & Gulp中强调的缺点

Thus, some advantages are rebut by Grunt overheads and at least you should consider all this in your final decision of using Grunt, or not.

因此，Grunt 开销会抵消一些优势，至少您应该在最终决定是否使用 Grunt 时考虑所有这些。