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

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