Gulp 工具窗口

使用此工具窗口运行 Gulp.js 任务。任务执行结果将显示在运行工具窗口中。该工具窗口显示 Gulp.js 输出，报告发生的错误，列出未找到的包或插件等。工具窗口的标题栏中显示上次执行任务的名称。

开始之前

下载并安装 Node.js。
全局安装 gulp-cli 包（Gulp 命令行界面），并将 gulp 包作为开发依赖安装。更多信息请参阅安装 Gulp.js。

运行任务

打开 Gulp 工具窗口

在项目工具窗口中选择所需的 Gulpfile.js 文件 Alt+1 ，或在编辑器中打开该文件，然后从上下文菜单中选择显示 Gulp 任务。

默认情况下，WebStorm 无法识别 Gulpfile.js 中的 ES6，也就无法构建任务树。要解决此问题，请更新 default Gulp.js run configuration。

从 ES6 Gulpfile.js 构建任务树

转到运行 | 编辑配置。或者，从工具栏的运行小部件中选择编辑配置。
在模板节点下，点击 Gulp.js。
在打开的 Run/Debug Configuration: Gulp.js 对话框中，在 Node 选项字段中输入 --harmony 并点击确定。

构建任务树

在 Gulp 工具窗口中，点击工具栏上的，然后从列表中选择所需的 Gulpfile.js 文件。默认情况下，WebStorm 会在项目根目录中显示 Gulpfile.js 文件。
如果您有其他 Gulpfile.js 文件，请点击选择 Gulpfile.js 并在打开的对话框中选择所需的 Gulpfile.js 文件。 WebStorm 会添加一个新节点，用于显示所选 Gulpfile.js 文件的路径，并在新节点下构建任务树。

重新构建任务树

切换到所需节点并点击工具栏上的。

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

点击工具栏上的，在菜单中选择排序方式，然后选择名称。
默认情况下，树以在 Gulpfile.js 中定义的顺序显示任务（选项定义顺序）。

运行任务

双击任务。
在树中选择任务，然后按 Enter ，或从上下文菜单中选择运行 <task name>。

运行默认任务

在树中选择根节点，然后从所选内容的上下文菜单中选择运行默认。

运行多个任务

使用多选模式：按住 Shift （用于相邻项）或 Ctrl （用于非相邻项）键并选择所需的任务，然后从选择内容的上下文菜单中选择运行或调试。

导航至任务定义

在树中选择所需的任务，然后从选择内容的上下文菜单中选择跳转到源代码。

工具栏

	添加 Gulpfile	点击此按钮可为另一个 Gulpfile.js 文件构建任务树。从列表中选择所需的 Gulpfile.js 文件。 WebStorm 会构建一个任务树，并将其显示在单独的节点下。
	移除 Gulpfile	点击此按钮可移除所选节点下的任务树。
	重新加载任务	点击此按钮可重新构建所选节点下的任务树。更新对应的 Gulpfile.js 文件后，可能需要重新构建任务树，因为 Gulp.js 不会自动更新树结构。
	全部折叠	单击此按钮可隐藏所有任务树，仅显示 Gulpfile.js 节点。
		单击此按钮可配置当前视图并更改工具窗口的查看模式。如需了解更多信息，请参阅工具窗口视图模式。请注意，大多数菜单项是可以启用或禁用的选项。启用的选项名称左侧会显示复选标记。特定于 Gulp 的选项包括： Gulp 设置：选择此选项以打开 Gulp 设置对话框，并更新 Gulp 和 Node 解释器的当前设置，请参阅 Gulp。排序方式：选择此选项可配置任务在树中显示的顺序。单击工具栏中的，从菜单中选择排序方式，然后选择名称。默认情况下，树以任务在 Gulpfile.js 中定义的顺序显示（选项定义顺序）。
	隐藏	单击此按钮可隐藏工具窗口。如需再次显示该工具窗口，请在主菜单中选择视图 \| 工具窗口 \| Gulp。工具窗口将再次显示，并展示之前构建的所有任务树。

树的上下文菜单

Gulp 设置	选择此菜单项以打开 Gulp 设置对话框并查看或编辑 Node.js 配置
跳转到源代码	选择此菜单项以打开构建当前树所依据的 Gulpfile.js 文件。
重新加载任务	选择此菜单项以重新构建所选节点下的任务树。
复制路径	选择此菜单项可将构建当前树所依据的 Gulpfile.js 文件的路径保存到剪贴板。
移除 Gulpfile.js	选择此菜单项以移除所选节点下的任务树。

任务的上下文菜单

运行 <task name>	选择此菜单项以运行所选任务。
调试 <task name>	选择此菜单项以调试所选任务。
编辑 <task name> 设置	选择此菜单项以打开运行/调试配置对话框，并编辑所选任务的预定义设置。
跳转到源代码	选择此菜单项以打开构建当前树所依据的 Gulpfile.js 文件，并跳转到所选任务的定义处。

最后修改日期： 2025年 9月 26日