Gulp 工具窗口
使用此工具窗口运行Gulp.js 任务执行任务的结果显示在运行工具窗口中。工具窗口显示 Gulp.js 输出，报告发生的错误，列出尚未找到的包或插件等。最后执行的任务的名称显示在工具窗口的标题栏上。
在你开始前
下载并安装Node.js。
全局安装gulp-cli包（Gulp 命令行界面），并将gulp包安装为开发依赖项。有关详细信息，请参阅安装 Gulp.js。
运行任务
打开 Gulp 工具窗口
在Project工具窗口中选择所需的Gulpfile.js文件或在编辑器中打开它，然后从上下文菜单中选择Show Gulp Tasks 。
默认情况下，PhpStorm 无法识别Gulpfile.js中的 ES6，并且无法构建任务树。为了解决这个问题，更新默认的 Gulp.js 运行配置。
从 ES6 Gulpfile.js 构建任务树
从主菜单中，选择。或者，从工具栏上的列表中选择编辑配置。
在Templates节点下，单击Gulp.js。
在打开的运行/调试配置：Gulp.js对话框中，输入
--harmony节点选项字段并单击确定。
构建任务树
在Gulp工具窗口中，单击
工具栏上的 并从列表中选择所需的Gulpfile.js文件。默认情况下，PhpStorm在项目的根目录中显示Gulpfile.js文件。如果您有另一个Gulpfile.js文件，请单击选择 Gulpfile.js并在打开的对话框中选择您需要的Gulpfile.js文件。PhpStorm 在其标题上添加一个带有所选Gulpfile.js文件路径的新节点，并在新节点下构建一个任务树。
重建一棵树
切换到所需节点并单击
工具栏上的 。
按名称对树中的任务进行排序
单击
工具栏上的 ，从菜单中选择排序方式，然后选择名称。默认情况下，树按照在Gulpfile.js中定义的顺序显示任务（选项定义顺序）。
运行任务
双击任务。
在树中选择任务，然后从上下文菜单中按Enter或选择运行 <task name> 。
运行默认任务
选择树中的根节点，然后从选择的上下文菜单中选择运行默认值。
运行多个任务
使用多选模式：按住Shift（对于相邻项）或Ctrl（对于非相邻项）键并选择所需的任务，然后从选择的上下文菜单中选择运行或调试。
导航到任务的定义
在树中选择所需的任务，然后从选择的上下文菜单中选择跳转到源。
工具栏
| 添加 Gulpfile | 单击此按钮以生成另一个Gulpfile.js文件的任务树。从列表中选择所需的Gulpfile.js文件。PhpStorm 构建一个任务树并将其显示在一个单独的节点下。 |
| 删除 Gulpfile | 单击此按钮可删除所选节点下的任务树。 |
| 重新加载任务 | 单击此按钮可重新构建所选节点下的任务树。在更新相应的Gulpfile.js文件后，您可能需要重新构建树，因为 Gulp.js 不会即时将更改应用于树。 |
| 全部收缩 | 单击此按钮可隐藏所有任务树并仅显示Gulpfile.js节点。 |
| 单击此按钮可配置当前视图并更改工具窗口的查看模式，详见工具窗口查看模式。 请注意，大多数菜单项都是您可以打开或关闭的选项。启用的选项在其名称左侧有一个复选标记。Gulp特定的选项是：
| |
| 隐藏 | 单击此按钮可隐藏工具窗口。要让它再次显示，请选择在主菜单上。工具窗口再次出现，显示所有先前构建的任务树。 |
树的上下文菜单
吞咽设置 | 选择此菜单项以打开Gulp 设置对话框并查看或编辑Node.js配置 |
跳转到源 | 选择此菜单项以打开为其构建当前树的Gulpfile.js文件。 |
重新加载任务 | 选择此菜单项可重新构建所选节点下的任务树。 |
复制路径 | 选择此菜单项以保存Gulpfile.js文件的路径，当前树根据该路径构建到剪贴板。 |
删除 Gulpfile.js | 选择此菜单项以删除所选节点下的任务树。 |
任务的上下文菜单
运行 <任务名称> | 选择此菜单项以运行选定的任务。 |
调试 <任务名称> | 选择此菜单项以调试选定的任务。 |
编辑 <任务名称> 设置 | 选择此菜单项以打开“运行/调试配置”对话框并编辑所选任务的预定义设置。 |
跳转到源 | 选择此菜单项以打开为其构建当前树的Gulpfile.js文件并导航到所选任务的定义。 |