# Gulp

> 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 与 [Gulp.js Task 运行程序](http://gulpjs.com/) 集成。 IntelliJ IDEA 解析  `Gulpfile.js` 文件，识别任务的定义，将任务显示在树视图中，让您可以在树中的任务和  `Gulpfile.js` 文件中的定义之间导航，并支持运行和调试任务。

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

## 开始之前

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

## 安装 Gulp.js

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

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

* 一个作为开发依赖项安装的 gulp 包，用于构建项目任务树并在编辑 `Gulpfile.js` 文件时提供编码辅助。 了解更多有关 `Gulpfile.js` 的信息，请访问 [Gulp.js 官方网站](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#create-a-gulpfile)。

Procedure: 全局安装 gulp-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 -global gulp-cli`

Procedure: 在项目中安装 Gulp.js

* 在命令行 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 gulp --save-dev`

## 从任务树运行 Gulp.js 任务

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

Gulp.js 开始构建  任务树 ，一旦通过选择   显示 Gulp 任务   来调用 Gulp.js，该选择位于  `Gulpfile.js`  在   项目   工具窗口 ( `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.js 的  `Gulpfile.js`  文件构建的。 如果您的项目中有多个  `Gulpfile.js`  文件，您可以为每个文件构建一个单独的任务树，并在不放弃先前构建的任务树的情况下运行任务。 每棵树都会显示在单独的节点下。

从技术上讲，IntelliJ IDEA 会调用 Gulp.js 并处理  `Gulpfile.js` ，根据  默认 Gulp.js 运行配置 。 这是在静默中完成的，无需您执行任何步骤。

Procedure: 打开 Gulp 工具窗口

在当前 IntelliJ IDEA 会话期间首次构建任务树时，   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 工具窗口构建任务树

* 在   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: 导航到任务的定义

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

## 运行来自 Gulpfile.js 的任务

Procedure:

1. 将文本光标放在要运行的任务定义处，然后从上下文菜单中选择   运行 <任务名称>  。 IntelliJ IDEA 创建并启动一个临时运行配置，名称为所选任务的名称。

2. 要保存自动创建的临时运行配置，请将插入光标置于为其创建的任务定义处，然后从选择的上下文菜单中选择   保存<task name>  。

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

除了使用 IntelliJ IDEA 自动创建的临时运行配置，您还可以创建和启动自己的 Gulp.js 运行配置。

Procedure: 创建 Gulp.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/调试配置：Gulp.js](run-debug-configuration-gulp-js.html)对话框打开。

2. 指定运行配置的名称、要运行的任务（使用空格作为分隔符）、定义这些任务的  `Gulpfile.js`  文件的位置，以及当前项目根目录下安装的  gulp  包的路径。

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) 并配置一个新的解释器。

可选地指定 [环境变量](http://en.wikipedia.org/wiki/Environment_variable) 以用于 Node.js 和执行任务的参数。 请使用格式  `--<parameter_name> <parameter_value>` ，例如：  `--env development` 。 了解更多信息，请访问 [Gulp 官方网站](https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md)。

Procedure: 运行任务

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

Procedure: 调试任务

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

2. 请在编辑器中打开  `Gulpfile.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: 作为启动前任务运行 Gulp 任务

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)区域中的   启动前  ，并从列表中选择   运行 Gulp 任务  。

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

指定 Node.js 运行时的位置、要传递给它的参数，以及  gulp  包的路径。

## 自动运行 Gulp.js 任务

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

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. 从列表中选择所需的  Gulp.js  运行配置。 配置已添加到列表中。

如果项目中没有可用的适用配置，请点击 ![添加按钮`](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置：Gulp.js](run-debug-configuration-gulp-js.html) [Gulp 工具窗口](gulp-tool-window.html) [启动任务](settings-tools-startup-tasks.html)