# Grunt

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 必需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

IntelliJ IDEA 与 [Grunt JavaScript Task Runner](http://gruntjs.com/) 集成。 IntelliJ IDEA 解析文件  `Gruntfile.js` ，识别任务和目标的定义，在树视图中显示任务和目标，允许您在树中的任务或目标与  `Gruntfile.js` 文件中的定义之间导航，并支持运行和调试任务和目标。

使用 IntelliJ IDEA，您可以通过专用的 [Grunt 工具窗口](grunt-tool-window.html) 中的任务树运行 Grunt 任务，或者使用 [Grunt 运行配置](run-debug-configuration-grunt.html)，或作为启动前任务。 IntelliJ IDEA 显示在 [运行工具窗口](run-tool-window.html)中执行任务的结果。 工具窗口显示 Grunt 输出，报告发生的错误，并列出未找到的包或插件等。 最后执行的任务名称显示在工具窗口的标题栏上。

## 开始之前

下载并安装 [Node.js](http://nodejs.org/#download)。

## 安装 Grunt

要在 一个 IntelliJ IDEA 项目中使用 Grunt，您需要两个包：

* 全局安装的 grunt-cli 包（Grunt 命令行界面）用于执行 Grunt 命令。

* 一个 grunt 包作为开发依赖项安装，以构建项目任务树，并在编辑 `Gruntfile.js` 或 `Gruntfile.coffee` 文件时提供代码辅助。 了解更多关于 `Gruntfile.js` 的信息，请访问 [Grunt 官方网站](http://gruntjs.com/getting-started#preparing-a-new-grunt-project)。

Procedure: 全局安装 grunt-cli

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install -g grunt-cli`

Procedure: 在项目中安装 Grunt

* 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install grunt --save-dev`

## 从任务树运行 Grunt 任务

IntelliJ IDEA 允许您直接从   Grunt   工具窗口中的任务树中轻松快捷地运行 Grunt 任务。 IntelliJ IDEA 会自动创建一个临时运行配置，您可以根据需要将其保存并在以后使用。

Procedure: 打开 Grunt 工具窗口

当您在 一个 IntelliJ IDEA 会话期间首次构建任务树时，   Grunt   工具窗口尚未打开。

* 在   项目   工具窗口 ( `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) 中选择所需的  `Gruntfile.js`  文件，或在编辑器中打开它，然后从上下文菜单中选择   显示 Grunt 任务  。

Procedure: 从 Grunt 工具窗口构建任务树

1. 在   Grunt   工具窗口中，点击工具栏上的 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，然后从列表中选择所需的  `Gruntfile.js`  文件。 默认情况下，IntelliJ IDEA 会显示项目根目录中的  `Gruntfile.js`  文件。

2. 如果您有其他  `Gruntfile.js`  文件，请点击   选择 Gruntfile.js  ，并在打开的对话框中选择所需的  `Gruntfile.js`  文件。 IntelliJ IDEA 会添加一个新节点，其标题包含所选  `Gruntfile.js`  文件的路径，并在该新节点下构建任务树。

Procedure: 重新构建树

* 切换到所需节点，然后点击工具栏上的 ![重新加载脚本](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.refresh.svg)。

Procedure: 按任务名称对树中的任务进行排序

* 点击工具栏上的 ![设置](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.gear.svg)，从菜单中选择   排序方式  ，然后选择   名称  。

默认情况下，树按它们在  `Gruntfile.js`  中定义的顺序显示任务（选项   定义顺序  ）。

Procedure: 运行任务或目标

* 双击任务或目标。

* 选择树中的任务或目标，然后按 `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (NetBeans), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) 或从上下文菜单中选择   运行 <任务名称>  。

请注意，当您从任务树中运行任务时，  强制执行 和  详细模式 选项不可用。 因此，您无法配置 IntelliJ IDEA 以忽略警告或提供详细日志。 要使用这些选项，请按照下文 [根据运行配置运行和调试任务](#ws_grunt_run_debug_task_by_run_configuration)的描述，从运行配置中运行任务或目标。

Procedure: 运行默认任务

* 选择树中的根节点，然后从选择的上下文菜单中选择   运行默认任务  。

Procedure: 运行几个任务或目标

* 使用多选模式：按住 `Shift` (Windows), `Shift` (macOS), `Shift` (IntelliJ IDEA Classic (macOS)), `Shift` (macOS System Shortcuts), `Shift` (XWin), `Shift` (GNOME), `Shift` (KDE), `Shift` (Emacs), `Shift` (Sublime Text), `Shift` (Sublime Text (macOS)), `Shift` (Visual Studio), `Shift` (Visual Studio (macOS)), `Shift` (NetBeans), `Shift` (Eclipse), `Shift` (Eclipse (macOS))（用于相邻项目）或 `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (NetBeans), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS))（用于非相邻项目）键并选择所需的任务或目标，然后从所选内容的上下文菜单中选择   运行   或   调试  。

Procedure: 跳转到任务或目标的定义

* 在树中选择所需的任务或目标，然后从该选择的上下文菜单中选择   跳转到源  。

## 根据运行配置运行和调试任务

除了使用  临时的  运行配置（在您从任务树运行任务或目标时 IntelliJ IDEA 会自动创建），您还可以创建和启动您自己的  Grunt.js  运行配置。

Procedure: 创建一个 Grunt.js 运行/调试配置

1. 前往  `运行 | 编辑配置` 。 或者，在工具栏上的   运行   小部件中选择   编辑配置  。

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_node_run_config_create.png)

在打开的   编辑配置  对话框中，点击工具栏上的   添加  按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Grunt.js](run-debug-configuration-grunt.html)对话框随即打开。透

2. 指定运行配置的名称、要运行的任务（使用空格作为分隔符）、定义这些任务的  `Gruntfile.js`  文件的位置以及全局安装的  grunt-cli  包的路径。

3. 指定要使用的 Node.js 运行时。

如果您选择   项目   别名， IntelliJ IDEA 将自动使用在 [JavaScript 运行时](javascript-runtime.html) 页面上   Node.js 运行时   字段中的项目默认解释器。 在大多数情况下， IntelliJ IDEA 会检测到项目的默认运行时，并自动填写该字段。

您还可以选择其他已配置的本地或远程解释器，或点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 并配置一个新的解释器。

可选择指定要传递给 Node.js 的 [Node.js 特定选项形参](run-debug-configuration-node-js.html#node_parameters)和 [环境变量](https://www.w3schools.com/nodejs/nodejs_environment.asp)。

变量定义显示在   环境变量   字段中，并用分号 (  `;` ) 分隔，例如：

* `NODE_PATH` 用于解析模块时搜索的附加目录列表。 在 macOS 或 Linux 上，目录列表请用冒号 ( `:` ) 分隔；在 Windows 上请用分号 ( `;` ) 分隔。

* `NODE_MODULE_CONTEXTS` 设置为 1 以在各自的全局上下文中加载模块。

* `NODE_DISABLE_COLORS` 设置为 1 以在 REPL 中禁用颜色。

![环境变量](https://resources.jetbrains.com/help/img/idea/2026.3/nodeEnvironmentVariables.png)

或者，点击字段右侧的   浏览   ![编辑环境变量](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.inline.variables.svg)，并在打开的   环境变量   对话框中配置变量列表：

* 请使用 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)、 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)、 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.copy.svg) 和 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.paste.svg) 按钮来管理自定义变量列表。

* 该对话框还会显示可用的系统环境变量列表。 如果不想为当前配置使用系统环境变量，请清除 包括系统环境变量 复选框。

* 准备就绪后，点击 OK 。

Procedure: 运行任务

* 在工具栏的   运行/调试配置   小部件列表中，选择新创建的    配置，然后点击其旁边的 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)。 IntelliJ IDEA 在 [运行工具窗口](run-tool-window.html)中显示任务输出。

Procedure: 调试任务

1. 创建  Grunt.js  运行/调试配置 [如上所述](#createGruntRunConfig)。

2. 请在编辑器中打开  `Gruntfile.js`  文件，并在必要的地方设置 [断点](using-breakpoints.html)。

3. 要开始调试会话，请从主工具栏的列表中选择所需的调试配置，然后点击列表旁边的 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)，或从主菜单中选择  `运行 | 调试 <配置名称>` 。

4. 在 [调试工具窗口](debug-tool-window.html)中，分析挂起的任务执行、逐步执行任务等内容，如 [检查挂起的程序](examining-suspended-program.html)和 [逐步执行程序](stepping-through-the-program.html)中所述。

Procedure: 将 Grunt 任务作为 启动前任务 运行

1. 通过从主菜单中选择 [运行/调试配置对话框](run-debug-configurations-dialog.html)来打开  `运行 | 编辑配置` 对话框，并从列表中选择所需的配置，或通过点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)并选择相关的运行配置类型来新建配置。

2. 在打开的对话框中，点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)区域中的   启动前  ，并从列表中选择   运行 Grunt 任务  。

3. 在打开的   Grunt 任务  对话框中，指定定义所需任务的  `Gruntfile.js` ，选择要执行的任务，并指定传递给 Grunt 工具的参数。

指定 Node.js 解释器的位置、传递给它的参数以及  grunt-cli  包的路径。

## 自动运行 Grunt 任务

如果您有一些定期运行的任务或目标，您可以将相应的运行配置添加到  启动任务 列表。 任务将在项目启动时自动执行。

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `工具 | 启动任务` 。

2. 在打开的 [启动任务页面](settings-tools-startup-tasks.html)上，点击工具栏上的 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)。

3. 从列表中选择所需的  Grunt  运行配置。 配置已添加到列表中。

如果项目中没有可用的适用配置，请点击 ![添加按钮`](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)并选择   编辑配置  。 然后在打开的 [Run/Debug configuration](run-debug-configuration-grunt.html)页面上定义具有所需设置的配置。 当您保存新配置时，它会自动添加到启动任务列表中。

## See also

### 外部链接

[http://gruntjs.com/getting-started](http://gruntjs.com/getting-started) [http://gruntjs.com/using-the-cli](http://gruntjs.com/using-the-cli)

### 参考

[运行/调试配置：Grunt.js](run-debug-configuration-grunt.html) [Grunt 工具窗口](grunt-tool-window.html) [启动任务](settings-tools-startup-tasks.html)

### 过程

[npm、pnpm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)