Gulp

PyCharm 与 Gulp.js Task 运行程序集成。 PyCharm 解析 Gulpfile.js 文件，识别任务的定义，将任务显示在树视图中，让您可以在树中的任务和 Gulpfile.js 文件中的定义之间导航，并支持运行和调试任务。

Gulp.js 任务可以从专用的 Gulp 工具窗口中的任务树运行，或从 Gulpfile.js 文件，通过启动 Gulp.js 运行配置，或作为其他运行配置的预启动任务运行。 PyCharm 显示了在运行工具窗口中执行任务的结果。工具窗口显示 Grunt 输出，报告发生的错误，并列出未找到的包或插件等。最后执行的任务名称显示在工具窗口的标题栏上。

在开始之前

请确保您的计算机上安装了 Node.js。

安装 Gulp.js

在一个 PyCharm 项目中使用 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 任务

PyCharm 使您可以直接从 Gulp 工具窗口中的任务树中轻松快速地运行 Gulp.js 任务。 PyCharm 会自动创建一个临时运行配置，您可以根据需要将其保存并在以后使用。

一旦您通过在项目工具窗口 Alt+1 中的某个 Gulpfile.js 的上下文菜单或在编辑器中打开的某个 Gulpfile.js 的上下文菜单中选择显示 Gulp 任务来调用 Gulp.js ，Gulp.js 会开始构建任务树。任务树是根据调用 Gulp.js 的 Gulpfile.js 文件构建的。如果您的项目中有多个 Gulpfile.js 文件，您可以为每个文件构建一个单独的任务树，并在不放弃先前构建的任务树的情况下运行任务。每棵树显示在一个单独的节点下。

从技术上讲，PyCharm 调用 Gulp.js 并根据默认 Gulp.js 运行配置处理 Gulpfile.js 。这是在静默中完成的，无需您执行任何步骤。

打开 Gulp 工具窗口

在当前 PyCharm 会话期间首次构建任务树时， Gulp 工具窗口尚未打开。

在项目工具窗口 Alt+1 中选择所需的 Gulpfile.js 文件，或在编辑器中打开它并从上下文菜单中选择显示 Gulp 任务。

默认情况下，PyCharm 无法识别 Gulpfile.js 中的 ES6，并且无法构建任务树。要解决此问题，请更新默认 Gulp.js 运行配置。

从 ES6 Gulpfile.js 构建任务树

转到运行 | 编辑配置。或者，从工具栏的运行小部件中选择编辑配置。
在模板节点下，点击 Gulp.js。
在打开的运行/调试配置：Gulp.js对话框中，在 --harmony 栏中输入 Node 选项并点击确定。

从 Gulp 工具窗口构建任务树

在 Gulp 工具窗口中，点击工具栏，然后从列表中选择所需的 Gulpfile.js 文件。默认情况下，PyCharm 会在项目的根目录中显示 Gulpfile.js 文件。
如果您有另一个 Gulpfile.js 文件，请点击选择 Gulpfile.js 并在打开的对话框中选择所需的 Gulpfile.js 文件。 PyCharm 添加一个新节点，其标题包含所选 Gulpfile.js 文件的路径，并在新节点下构建任务树。

重新构建树

切换到所需节点并在工具栏上点击。

按任务名称对树中的任务进行排序

点击工具栏上的图标，从菜单中选择排序方式，然后选择名称。
默认情况下，树按定义任务的顺序显示 Gulpfile.js （选项定义顺序）。

运行任务

双击此任务。
在树中选择任务并按 Enter 或从上下文菜单中选择运行<task name>。

运行默认任务

在树中选择根节点，然后从上下文菜单中选择运行默认。

运行多个任务

使用多选模式：按住 Shift （用于相邻项目）或 Ctrl （用于非相邻项目）键并选择所需任务，然后从选择的上下文菜单中选择运行或调试。

导航到任务的定义

在树中选择所需的任务，并从选择的上下文菜单中选择跳转到源。

运行来自 Gulpfile.js 的任务

将文本光标放在要运行的任务定义处，然后从上下文菜单中选择运行 <task name>。 PyCharm 创建并启动一个临时运行配置，名称为所选任务的名称。
要保存自动创建的临时运行配置，请将插入光标置于为其创建的任务定义处，然后从选择的上下文菜单中选择保存<task name>。

根据运行配置运行和调试任务

除了使用 PyCharm 自动创建的临时运行配置，您还可以创建和启动自己的 Gulp.js 运行配置。

创建 Gulp.js 运行配置

转到运行 | 编辑配置。或者，从工具栏的运行小部件中选择编辑配置。
在打开的编辑配置对话框中，点击工具栏上的添加按钮（），然后从列表中选择 Gulp.js。运行/调试配置：Gulp.js对话框打开。
指定运行配置的名称、要运行的任务（使用空格作为分隔符）、定义这些任务的 Gulpfile.js 文件的位置，以及当前项目根目录下安装的 gulp 包的路径。
指定要使用的 Node.js 解释器。
如果您选择项目别名，PyCharm 将自动使用 Node 解释器字段中 Node.js 页面的项目默认解释器。在大多数情况下，PyCharm 会检测到项目的默认解释器并自动填写该字段。
您也可以选择另一个已配置的本地或远程解释器，或点击并配置一个新的。
可选地指定环境变量以用于 Node.js 和执行任务的参数。请使用格式 --<parameter_name> <parameter_value> ，例如： --env development。了解更多信息，请访问 Gulp 官方网站。

运行任务

从工具栏的运行/调试配置小部件列表中，选择新创建的配置，然后点击旁边的。输出显示在运行工具窗口。

调试任务

创建 Gulp.js 运行/调试配置如上所述。
请在编辑器中打开 Gulpfile.js 文件，并在必要的地方设置断点。
要开始调试会话，请从主工具栏的列表中选择所需的调试配置，然后点击列表旁的或从主菜单中选择运行 | 调试<配置名称>。
在调试工具窗口中，分析挂起的任务执行、逐步执行任务等内容，如检查挂起的程序和逐步执行程序中所述。

作为启动前任务运行 Gulp 任务

通过从主菜单中选择运行 | 编辑配置打开运行/调试配置对话框，并从列表中选择所需的配置，或通过点击并选择相关的运行配置类型来新建配置。
在打开的对话框中，点击区域中的启动前，并从列表中选择运行 Gulp 任务。
在打开的 Gulp 任务对话框中，指定定义所需任务的 Gulpfile.js ，选择要执行的任务，并指定要传递给 Gulp 工具的参数。
指定 Node.js 解释器的位置、传递给解释器的参数以及到 gulp 包的路径。

自动运行 Gulp.js 任务

如果您有一些定期运行的任务，可以将相应的运行配置添加到启动任务列表中。任务将在项目启动时自动执行。

在设置对话框（Ctrl+Alt+S ）中，点击启动任务下的工具。
在打开的启动任务页面上，点击工具栏上的。
从列表中选择所需的 Gulp.js 运行配置。配置已添加到列表中。
如果项目中没有可用的适用配置，请点击并选择编辑配置。然后在打开的 Run/Debug configuration页面上定义具有所需设置的配置。当您保存新配置时，它会自动添加到启动任务列表中。

最后修改日期： 2025年 9月 26日