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 日