Gulp
WebStorm 集成了 Gulp.js Task Runner。 WebStorm 会解析 Gulpfile.js 文件，识别任务定义、以树视图显示任务，允许您在树中的任务与其在 Gulpfile.js 文件中的定义之间切换，并支持运行和调试任务。
Gulp.js 任务可从专用的 Gulp 工具窗口中的任务树运行，或通过启动 Gulp.js 运行配置从 Gulpfile.js 文件中运行，或作为其他运行配置中的启动前任务运行。 WebStorm 会在 “运行”工具窗口中显示任务执行结果。 该工具窗口显示 Grunt 输出、报告发生的错误、列出未找到的包或插件等。 上次执行的任务名称显示在工具窗口标题栏中。
开始之前
请确保您的计算机上已安装 Node.js。
安装 Gulp.js
要在 一个 WebStorm 项目中使用 Gulp，您需要两个软件包：
全局安装的 gulp-cli 软件包（Gulp 命令行界面），用于执行 Gulp 命令。
以开发依赖项安装的 gulp 软件包，用于构建项目任务树，并在编辑 Gulpfile.js 文件时提供编码辅助。 有关 Gulpfile.js 的更多信息，请参阅 Gulp.js 官方网站。
全局安装 gulp-cli
在嵌入的 终端 （Alt+F12 ）中键入：
npm install -global gulp-cli
在项目中安装 Gulp.js
在嵌入的 终端 （Alt+F12 ）中键入：
npm install gulp --save-dev
从任务树运行 Gulp.js 任务
WebStorm 允许您直接从 Gulp 工具窗口的任务树中轻松快速地运行 Gulp.js 任务。 WebStorm 会自动创建临时运行配置，如有需要，您可以将其保存并稍后使用。
Gulp.js 会在您从 项目 工具窗口 Alt+1 中的 Gulpfile.js 的上下文菜单或编辑器中打开的 Gulpfile.js 的上下文菜单中选择 显示 Gulp 任务 时立即开始构建 任务树。 该树根据 Gulp.js 被调用所针对的 Gulpfile.js 文件进行构建。 如果项目中有多个 Gulpfile.js 文件，您可以分别为每个文件构建任务树，并在不放弃先前构建的任务树的情况下运行任务。 每个任务树显示在单独的节点下。
从技术实现来看，WebStorm 调用 Gulp.js 并根据 默认的 Gulp.js 运行配置处理 Gulpfile.js 。 该操作在后台静默执行，无需您进行任何操作。
打开 Gulp 工具窗口
在当前 WebStorm 会话期间首次构建任务树时， 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 工具窗口构建任务树
在 Gulp 工具窗口中，点击工具栏上的
，然后从列表中选择所需的 Gulpfile.js 文件。 默认情况下，WebStorm 会在项目根目录中显示 Gulpfile.js 文件。如果您有其他 Gulpfile.js 文件，请点击 选择 Gulpfile.js ，然后在打开的对话框中选择所需的 Gulpfile.js 文件。 WebStorm 会添加一个新节点，该节点标题显示所选 Gulpfile.js 文件的路径，并在该节点下构建任务树。
重新构建任务树
切换到所需节点，然后点击工具栏上的
。
按名称对树中的任务排序
点击工具栏上的
，从菜单中选择 排序方式 ，然后选择 名称。 默认情况下，任务树会按照任务在 Gulpfile.js 中定义的顺序显示（选项 定义顺序）。
运行任务
双击任务。
在任务树中选择任务后，按 Enter ，或从上下文菜单中选择 运行 <任务名称>。
运行默认任务
在任务树中选择根节点，并从上下文菜单中选择 运行默认。
运行多个任务
使用多选模式：按住 Shift （用于相邻项）或 Ctrl （用于不相邻项）键并选择所需任务，然后从所选项的上下文菜单中选择 运行 或 调试。
导航到任务定义
在任务树中选择所需任务，并从所选项的上下文菜单中选择 跳转到源代码。
从 Gulpfile.js 运行任务
将光标置于要运行的任务定义处，并从上下文菜单中选择 运行 <任务名称>。 WebStorm 会创建并启动一个以所选任务命名的临时运行配置。
要保存自动创建的临时运行配置，请将光标置于其所创建的任务定义处，并从所选项的上下文菜单中选择 保存 <任务名称>。
根据运行配置运行并调试任务
除了使用 WebStorm 自动创建的临时运行配置，您还可以创建并启动自己的 Gulp.js 运行配置。
创建 Gulp.js 运行配置
转到 。 或者，从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 Gulp.js。 将打开 Run/Debug Configuration: Gulp.js 对话框。指定运行配置的名称、要运行的任务（使用空格分隔），定义这些任务的 Gulpfile.js 文件的位置，以及当前项目根目录中已安装的 gulp 包的路径。
指定要使用的 Node.js 解释器。
如果选择 项目 别名，WebStorm 将自动使用来自 Node 解释器 字段的项目默认解释器，该字段位于 Node.js 页面。 在大多数情况下，WebStorm 会检测项目默认解释器并自动填充该字段。
您也可以选择另一个已配置的本地或远程解释器，或点击
配置一个新的解释器。如需了解更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统上使用 Node.js。
可选地为 Node.js 指定 环境变量 ，以及执行任务所需的参数。 请使用格式
--<parameter_name> <parameter_value>，例如：--env development。 请参阅 Gulp 官方网站 了解更多信息。
运行任务
在工具栏的 运行/调试配置 小部件列表中选择新创建的 配置，然后点击其旁边的
。 输出将显示在 运行工具窗口 中。
调试任务
，或从主菜单中选择 将 Gulp 任务作为启动前任务运行
通过从主菜单中选择 打开 运行/调试配置对话框 ，从列表中选择所需配置，或点击
并选择相应的运行配置类型以新建配置。在打开的对话框中，在 启动前 区域点击
，然后从列表中选择 运行 Gulp 任务。在打开的 Gulp 任务 对话框中，指定定义所需任务的 Gulpfile.js ，选择要执行的任务，并指定传递给 Gulp 工具的参数。
指定 Node.js 解释器的位置、传递给它的参数以及 gulp 包的路径。
自动运行 Gulp.js 任务
如果您有一些定期运行的任务，可以将相应的运行配置添加到 启动任务 列表中。 这些任务将在项目启动时自动执行。