Gulp

PyCharm 与 Gulp.js 任务运行器集成。 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，并处理 Gulpfile.js ，依据默认 Gulp.js 运行配置。该操作会静默完成，无需您执行任何步骤。

打开 Gulp 工具窗口

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

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

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

从 ES6 Gulpfile.js 构建任务树

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

从 Gulp 工具窗口构建任务树

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

重新构建任务树

切换到所需节点，然后在工具栏上点击。

按名称对树中的任务排序

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

运行任务

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

运行默认任务

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

运行多个任务

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

导航到任务定义

在树中选择所需的任务，然后从所选内容的上下文菜单中选择转到源。

从 Gulpfile.js 运行任务

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

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

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

创建 Gulp.js 运行配置

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

运行任务

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

调试任务

创建 Gulp.js 运行/调试配置如上所述。
在编辑器中打开 Gulpfile.js 文件，并在需要处设置断点。
要开始调试会话，选择主工具栏列表中的所需调试配置，并点击列表旁边的，或从主菜单中选择运行 | 调试 <configuration name>。
在打开的调试工具窗口中，如检查已暂停的程序和逐步执行程序中所述，分析已暂停的任务执行、单步执行任务等。

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

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

自动运行 Gulp.js 任务

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

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

最后修改日期： 2025年 12月 2日