吞咽
WebStorm 与Gulp.js Task Runner集成。WebStorm 解析Gulpfile.js文件，识别任务定义，在树视图中显示任务，让您在树中的任务和Gulpfile.js文件中的定义之间导航，并支持运行和调试任务。
Gulp.js 任务可以从专用Gulp Tool Window的任务树中运行，或者从Gulpfile.js文件中运行，方法是启动Gulp.js 运行配置，或者作为启动前任务从另一个运行配置中运行。WebStorm 在运行工具窗口中显示执行任务的结果。工具窗口显示 Grunt 输出，报告发生的错误，列出尚未找到的包或插件等。最后执行的任务的名称显示在工具窗口的标题栏上。
在你开始前
确保您的计算机上有Node.js。
安装 Gulp.js
要在 WebStorm 项目中使用 Gulp，您需要两个包：
一个全局安装的 gulp-cli包（Gulp 命令行界面），用于执行 Gulp 命令。
作为开发依赖项安装的gulp包，用于构建项目任务树并在编辑Gulpfile.js文件时提供编码帮助。从Gulp.js 官方网站了解更多关于Gulpfile.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 通过在项目工具窗口中的Gulpfile.js或在编辑器中打开的Gulpfile.js的上下文菜单上选择Show Gulp Tasks来调用 Gulp.js 后立即开始构建任务树。该树是根据调用 Gulp.js 的Gulpfile.js文件构建的。如果您的项目中有多个Gulpfile.js文件，您可以为每个文件构建单独的任务树并运行任务，而不会放弃之前构建的任务树。每棵树都显示在一个单独的节点下。
从技术上讲，WebStorm 调用 Gulp.js 并根据默认的 Gulp.js 运行配置处理Gulpfile.js。这是静默完成的，不需要您采取任何步骤。
打开 Gulp 工具窗口
在当前 WebStorm 会话期间首次构建任务树时，Gulp工具窗口尚未打开。
在Project工具窗口中选择所需的Gulpfile.js文件或在编辑器中打开它，然后从上下文菜单中选择Show Gulp Tasks 。
默认情况下，WebStorm 无法识别 Gulpfile.js 中的 ES6，并且无法构建任务树。为了解决这个问题，更新默认的 Gulp.js 运行配置。
从 ES6 Gulpfile.js 构建任务树
从主菜单中，选择。或者，从工具栏上的列表中选择编辑配置。
在Templates节点下，单击Gulp.js。
在打开的运行/调试配置：Gulp.js对话框中，输入
--harmony节点选项字段并单击确定。
从 Gulp 工具窗口构建任务树
在Gulp工具窗口中，单击
工具栏上的 并从列表中选择所需的Gulpfile.js文件。默认情况下，WebStorm在项目的根目录中显示Gulpfile.js文件。如果您有另一个Gulpfile.js文件，请单击选择 Gulpfile.js并在打开的对话框中选择您需要的Gulpfile.js文件。WebStorm 在其标题上添加一个带有所选Gulpfile.js文件路径的新节点，并在新节点下构建一个任务树。
重建一棵树
切换到所需节点并单击
工具栏上的 。
按名称对树中的任务进行排序
单击
工具栏上的 ，从菜单中选择排序方式，然后选择名称。默认情况下，树按照在Gulpfile.js中定义的顺序显示任务（选项定义顺序）。
运行任务
双击任务。
在树中选择任务，然后从上下文菜单中按Enter或选择运行 <task name> 。
运行默认任务
选择树中的根节点，然后从上下文菜单中选择运行默认值。
运行多个任务
使用多选模式：按住Shift（对于相邻项）或Ctrl（对于非相邻项）键并选择所需的任务，然后从选择的上下文菜单中选择运行或调试。
导航到任务的定义
在树中选择所需的任务，然后从选择的上下文菜单中选择跳转到源。
从 Gulpfile.js 运行任务
将插入符号放置在要运行的任务的定义处，然后从上下文菜单中选择Run <task name> 。WebStorm 使用所选任务的名称创建并启动临时运行配置。
要保存自动创建的临时运行配置，请将光标放在为其创建它的任务的定义上，然后从选择的上下文菜单中选择Save <task name> 。
根据运行配置运行和调试任务
除了使用 WebStorm 自动创建的临时运行配置外，您还可以创建和启动自己的 Gulp.js 运行配置。
创建 Gulp.js 运行配置
从主菜单中，选择。或者，从工具栏上的列表中选择编辑配置。
单击工具栏上的 并从列表中
选择Gulp.js。运行/调试配置：Gulp.js对话框打开。指定运行配置的名称、要运行的任务（使用空格作为分隔符）、定义这些任务的Gulpfile.js文件的位置以及安装在当前项目根目录下的 gulp 包的路径。
指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或Windows Subsystem for Linux 上的 Node.js。
（可选）指定 Node.js 的环境变量和执行任务的参数。使用格式
--<parameter_name> <parameter_value>，例如：--env development. 从Gulp 官方网站了解更多信息。
运行任务
选择新创建的从工具栏上的选择运行/调试配置列表中选择配置，然后单击
列表旁边的。输出显示在运行工具窗口中。
调试任务
列表旁边的或选择运行 Gulp 任务作为启动前任务
通过选择打开Run/debug 配置对话框。在主菜单上
，然后从列表中选择所需的配置，或者通过单击并选择相关的运行配置类型来重新创建它。在打开的对话框中，单击
Before launch区域并从列表中选择Run Gulp 任务。在打开的Gulp 任务对话框中，指定定义所需任务的Gulpfile.js，选择要执行的任务，并指定要传递给 Gulp 工具的参数。
指定 Node.js 解释器的位置、传递给它的参数以及gulp包的路径。
自动运行 Gulp.js 任务
如果您有一些定期运行的任务，您可以将相应的运行配置添加到启动任务列表中。这些任务将在项目启动时自动执行。
在“设置/首选项”对话框 ( Ctrl+Alt+S) 中，单击“工具”下的“启动任务” 。
在打开的启动任务页面上，单击
工具栏上的 。从列表中，选择所需的Gulp.js运行配置。配置将添加到列表中。
如果项目中没有可用的配置，请单击
并选择Edit Configurations。然后在打开的运行/调试配置：Gulp.js页面上定义具有所需设置的配置。当您保存新配置时，它会自动添加到启动任务列表中。