# Gulp 工具窗口

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

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

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

## 开始之前

Procedure:

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

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

## 运行任务

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

Procedure: 要打开 Gulp 工具窗口

* 在   项目   工具窗口 ( `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))) 中选择所需的  `Gulpfile.js`  文件，或在编辑器中打开它，然后从上下文菜单中选择   显示 Gulp 任务  。

默认情况下，IntelliJ IDEA 无法在  `Gulpfile.js`  中识别 ES6 并且无法构建任务树。 要解决此问题，请更新  默认 Gulp.js 运行配置 。

Procedure: 从 ES6 Gulpfile.js 构建任务树

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

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Gulp.js](run-debug-configuration-gulp-js.html)对话框中，在  `--harmony` 栏中输入   Node 选项  并点击   OK  。

Procedure: 构建任务树

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

* 如果您有其他  `Gulpfile.js`  文件，请点击   选择 Gulpfile.js  ，并在打开的对话框中选择所需的  `Gulpfile.js`  文件。 IntelliJ IDEA 会添加一个新节点，其标题包含所选  `Gulpfile.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)，从菜单中选择   排序方式  ，然后选择   名称  。

默认情况下，树按它们在  `Gulpfile.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: 要导航到任务的定义

* 在树中选择所需的任务，并从选择的上下文菜单中选择   跳转到源  。

## 工具栏

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