# Grunt 工具窗口

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

> **TL;DR**
> `Gruntfile.js 的上下文菜单 - 显示 Grunt 任务`
>
>
>
> `视图 | 工具窗口 | Grunt`

使用此工具窗口运行 [Grunt tasks](http://gruntjs.com/)。 执行任务的结果显示在 [运行工具窗口](run-tool-window.html)中。 工具窗口显示 Grunt 输出，报告发生的错误，并列出未找到的包或插件等。 最后执行的任务名称显示在工具窗口的标题栏上。

## 开始之前

Procedure:

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

2. 请全局安装  grunt-cli  软件包（Grunt 命令行界面），并作为开发依赖安装  grunt  软件包。 如需更多信息，请参阅 [Installing Grunt](using-grunt-task-runner.html#installingGrunt)。

## 运行任务和目标

> **Tip:**
> * 当您在 一个 IntelliJ IDEA 会话期间首次构建任务树时， Grunt 工具窗口尚未打开。
>
> * 如果您已经打开 Grunt 工具窗口，您可以使用 [Search everywhere](searching-everywhere.html)访问它。 按 `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)) 两次以打开搜索窗口，开始输入您的查询，例如 `Grunt 任务` ，并从列表中选择 显示 Grunt 任务 。 您也可以从主菜单中选择 `视图 | 工具窗口 | Grunt` 。

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

* 如果您有其他  `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)) 或从上下文菜单中选择   运行 <任务名称>  。

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: 跳转到任务或目标的定义

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

## 工具栏

|  ![添加 Gruntfile](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)  |  添加 Gruntfile  |  点击此按钮以为另一个  `Gruntfile.js`  文件构建任务树。 从列表中选择所需的  `Gruntfile.js`  文件。 IntelliJ IDEA 添加了一个新节点，并在其下构建了一个任务树。  |
|  ![删除 Gruntfile](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)  |  删除 Gruntfile  |  点击此按钮以移除选定节点下的任务树。  |
|  ![重新加载任务](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.refresh.svg)  |  重新加载任务  |  点击此按钮以重新构建所选节点下的任务树。 更新相应的  `Gruntfile.js`  文件后，您可能需要重新构建树，因为 Grunt 不会即时应用对树的更改。  |
|  ![全部折叠](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.collapseAll.svg)  |  全部折叠  |  点击此按钮以隐藏所有任务树，仅显示   Gruntfile.js  节点。  |
|  ![视图模式](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.gear.svg)  |   |     点击此按钮以配置当前视图并更改工具窗口的查看模式。 有关更多信息，请参阅 [工具窗口视图模式](viewing-modes.html)。       请注意，大多数菜单项是可以开启或关闭的选项。 一个选项打开时，在其名称左侧有一个复选标记。  Grunt  特定选项如下：        * Grunt 设置： 选择此选项以打开 [Grunt 设置对话框](run-debug-configuration-grunt.html)，并更新 Grunt 和 Node.js 运行时 的当前设置，请参阅 [Grunt](using-grunt-task-runner.html)。    * 排序依据: 选择此选项以配置任务在树中显示的顺序。 点击 ![设置](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.gear.svg) 工具栏上的按钮，从菜单中选择 排序方式 ，然后选择 名称 。 默认情况下，树按它们在 `Gruntfile.js` 中定义的顺序显示任务（选项 定义顺序 ）。    |
|  ![隐藏](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Grunt.js](run-debug-configuration-grunt.html)

### 外部链接

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