PhpStorm 2021.3 Help

吞咽

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

Gulp.js 任务可以从专用Gulp Tool Window的任务树中运行，或者从Gulpfile.js文件中运行，方法是启动Gulp.js 运行配置，或者作为启动前任务从另一个运行配置中运行。PhpStorm 在运行工具窗口中显示执行任务的结果。工具窗口显示 Grunt 输出，报告发生的错误，列出尚未找到的包或插件等。最后执行的任务的名称显示在工具窗口的标题栏上。

在你开始前

下载并安装Node.js。

安装 Gulp.js

要在 PhpStorm 项目中使用 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 任务

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

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

从技术上讲，PhpStorm 调用 Gulp.js 并根据默认的 Gulp.js 运行配置处理Gulpfile.js。这是静默完成的，不需要您采取任何步骤。

打开 Gulp 工具窗口

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

  • 在Project工具窗口中选择所需的Gulpfile.js文件或在编辑器中打开它，然后从上下文菜单中选择Show Gulp Tasks 。

默认情况下，PhpStorm 无法识别Gulpfile.js中的 ES6，并且无法构建任务树。为了解决这个问题，更新默认的 Gulp.js 运行配置。

从 ES6 Gulpfile.js 构建任务树

  1. 从主菜单中，选择运行 | 编辑配置。或者，从工具栏上的列表中选择编辑配置。

  2. 在Templates节点下，单击Gulp.js。

  3. 在打开的运行/调试配置：Gulp.js对话框中，输入--harmony节点选项字段并单击确定。

从 Gulp 工具窗口构建任务树

  • 在Gulp工具窗口中，单击添加按钮工具栏上的 并从列表中选择所需的Gulpfile.js文件。默认情况下，PhpStorm在项目的根目录中显示Gulpfile.js文件。

  • 如果您有另一个Gulpfile.js文件，请单击选择 Gulpfile.js并在打开的对话框中选择您需要的Gulpfile.js文件。PhpStorm 在其标题上添加一个带有所选Gulpfile.js文件路径的新节点，并在新节点下构建一个任务树。

重建一棵树

  • 切换到所需节点并单击重新加载脚本工具栏上的 。

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

  • 单击设置工具栏上的 ，从菜单中选择排序方式，然后选择名称。

    默认情况下，树按照在Gulpfile.js中定义的顺序显示任务（选项定义顺序）。

运行任务

  • 双击任务。

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

运行默认任务

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

运行多个任务

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

导航到任务的定义

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

从 Gulpfile.js 运行任务

  1. 将插入符号放置在要运行的任务的定义处，然后从上下文菜单中选择Run <task name> 。PhpStorm 使用所选任务的名称创建并启动临时运行配置。

  2. 要保存自动创建的临时运行配置，请将光标放在为其创建它的任务的定义上，然后从选择的上下文菜单中选择Save <task name> 。

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

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

创建 Gulp.js 运行配置

  1. 从主菜单中，选择运行 | 编辑配置。或者，从工具栏上的列表中选择编辑配置。

  2. 单击工具栏上的 并从列表中添加按钮选择Gulp.js。运行/调试配置：Gulp.js对话框打开。

  3. 指定运行配置的名称、要运行的任务（使用空格作为分隔符）、定义这些任务的Gulpfile.js文件的位置以及安装在当前项目根目录下的 gulp 包的路径。

  4. 指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或Windows Subsystem for Linux 上的Node.js。

    （可选）指定 Node.js 的环境变量和执行任务的参数。使用格式--<parameter_name> <parameter_value>，例如：--env development. 从Gulp 官方网站了解更多信息。

运行任务

  • 选择新创建的从工具栏上的选择运行/调试配置列表中选择配置，然后单击运行按钮列表旁边的。输出显示在运行工具窗口中。

调试任务

  1. 如上所述创建 Gulp.js 运行/调试配置。

  2. 在编辑器中打开Gulpfile.js文件并在必要时在其中设置断点。

  3. 要启动调试会话，请从主工具栏上的列表中选择所需的调试配置，然后单击调试按钮列表旁边的或选择运行 | 从主菜单调试 <配置名称> 。

  4. 在打开的调试工具窗口中，分析挂起的任务执行、单步执行任务等，如检查挂起的程序和单步执行程序中所述。

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

  1. 通过选择Run |打开Run/debug 配置对话框。在主菜单上编辑配置添加按钮，然后从列表中选择所需的配置，或者通过单击并选择相关的运行配置类型来重新创建它。

  2. 在打开的对话框中，单击添加按钮Before launch区域并从列表中选择Run Gulp 任务。

  3. 在打开的Gulp 任务对话框中，指定定义所需任务的Gulpfile.js，选择要执行的任务，并指定要传递给 Gulp 工具的参数。

    指定 Node.js 解释器的位置、传递给它的参数以及gulp包的路径。

自动运行 Gulp.js 任务

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

  1. 在“设置/首选项”对话框 ( Ctrl+Alt+S) 中，单击“工具”下的“启动任务” 。

  2. 在打开的启动任务页面上，单击添加按钮工具栏上的 。

  3. 从列表中，选择所需的Gulp.js运行配置。配置将添加到列表中。

    如果项目中没有可用的配置，请单击添加按钮`并选择Edit Configurations。然后在打开的运行/调试配置：Gulp.js页面上定义具有所需设置的配置。当您保存新配置时，它会自动添加到启动任务列表中。

最后修改时间：2021 年 10 月 20 日
Grunt 车把和小胡子