Gulp 工具窗口
使用此工具窗口运行 Gulp.js 任务 。任务执行结果显示在 运行工具窗口中。 工具窗口显示 Gulp.js 的输出,报告发生的错误,列出未找到的软件包或插件等。 最后执行的任务名称显示在工具窗口的标题栏上。
开始之前
下载并安装 Node.js。
全局安装 gulp-cli 软件包(Gulp 命令行界面)并将 gulp 软件包作为开发依赖项进行安装。 如需更多信息,请参阅 Installing Gulp.js。
正在运行任务
要打开 Gulp 工具窗口
在 项目 工具窗口 Alt+1 中选择所需的 Gulpfile.js 文件,或在编辑器中打开它,然后从上下文菜单中选择 显示 Gulp 任务。
默认情况下,IntelliJ IDEA 无法在 Gulpfile.js 中识别 ES6 并且无法构建任务树。 要解决此问题,请更新 默认 Gulp.js 运行配置。
从 ES6 Gulpfile.js 构建任务树
前往 。 或者,从工具栏上的 编辑配置 小部件中选择 运行。

在 模板 节点下,点击 Gulp.js。
在打开的 运行/调试配置:Gulp.js对话框中,在
--harmony栏中输入 Node 选项 并点击 OK。
构建任务树
在 Gulp 工具窗口中,点击
工具栏上的按钮,并从列表中选择所需的 Gulpfile.js 文件。 默认情况下,IntelliJ IDEA 显示项目根目录中的 Gulpfile.js 文件。
如果您有另一个 Gulpfile.js 文件,请点击 选择 Gulpfile.js 并在打开的对话框中选择您需要的 Gulpfile.js 文件。 IntelliJ IDEA 在其标题中添加了一条包含所选 Gulpfile.js 文件路径的新节点,并在新节点下构建任务树。
重新构建树
切换到所需节点,然后点击工具栏上的
。
按名称对树中的任务进行排序
点击
工具栏上的按钮,从菜单中选择 排序方式 ,然后选择 名称。
默认情况下,树会按照任务在 Gulpfile.js 中定义的顺序显示它们(选项 定义顺序)。
开始任务
双击此任务。
在树中选择任务并按 Enter 或从上下文菜单中选择 运行<task name>。
运行默认任务
在树中选择根节点,并从选择项的上下文菜单中选择 运行默认设置。
运行多个任务
使用多选模式:按住 Shift (用于相邻项目)或 Ctrl (用于非相邻项目)键并选择所需任务,然后从选择的上下文菜单中选择 运行 或 调试。
要导航到任务的定义
在树中选择所需的任务,并从选择的上下文菜单中选择 跳转到源。
工具栏
添加 Gulpfile | 点击此按钮以构建另一个 Gulpfile.js 文件的任务树。 从列表中选择所需的 Gulpfile.js 文件。 IntelliJ IDEA 构建任务树并显示在单独的节点下。 | |
| 删除 Gulpfile | 点击此按钮以移除选定节点下的任务树。 |
| 重新加载任务 | 点击此按钮以重新构建所选节点下的任务树。 更新相应的 Gulpfile.js 文件后,您可能需要重新构建树,因为 Gulp.js 不会即时应用对树的更改。 |
收缩全部 | 点击此按钮以隐藏所有任务树,仅显示 Gulpfile.js 节点。 | |
点击此按钮以配置当前视图并更改工具窗口的查看模式。 有关更多信息,请参阅 工具窗口视图模式。 请注意,大多数菜单项是可以开启或关闭的选项。 一个选项打开时,在其名称左侧有一个复选标记。 Gulp 特定的选项有:
| ||
隐藏 | 点击此按钮以隐藏工具窗口。 若要再次显示它,请在主菜单中选择 。 工具窗口再次出现,显示所有先前构建的任务树。 |
树的上下文菜单
Gulp 设置 | 选择此菜单项以打开 Gulp 设置 对话框并查看或编辑 Node.js配置 |
跳转到源 | 选择此菜单项以打开当前树构建的 Gulpfile.js 文件。 |
重新加载任务 | 选择此菜单项以重新构建所选节点下的任务树。 |
复制路径 | 选择此菜单项以将构建当前树的 Gulpfile.js 文件路径保存到剪贴板。 |
删除 Gulpfile.js | 选择此菜单项以删除所选节点下的任务树。 |
任务的上下文菜单
运行<task name> | 选择此菜单项以运行选定的任务。 |
调试 <task name> | 选择此菜单项以调试所选任务。 |
编辑<任务名称>设置 | 选择此菜单项以打开 运行/调试配置 对话框,并编辑所选任务的预定义设置。 |
跳转到源 | 选择此菜单项以打开 Gulpfile.js 文件(当前树为其构建),并导航到选定任务的定义。 |