PhpStorm 2021.3 Help

咕噜声

PhpStorm 与Grunt JavaScript Task Runner集成。PhpStorm 解析Gruntfile.js文件,识别任务和目标的定义,在树视图中显示任务和目标,让您在树中的任务或目标及其在Gruntfile.js文件中的定义之间导航,并支持运行和调试任务和目标。

使用 PhpStorm,您可以从专用Grunt 工具窗口中的任务树运行 Grunt 任务,或使用Grunt 运行配置,或作为启动前任务。PhpStorm 在运行工具窗口中显示执行任务的结果。工具窗口显示 Grunt 输出,报告发生的错误,列出尚未找到的包或插件等。最后执行的任务的名称显示在工具窗口的标题栏上。

在你开始前

下载并安装Node.js。

安装咕噜

要在 PhpStorm 项目中使用 Grunt,您需要两个包:

  • 一个全局安装的 grunt-cli包(Grunt 命令行界面),用于执行 Grunt 命令。

  • 作为开发依赖项安装的grunt包,用于构建项目任务树并在编辑Gruntfile.jsGruntfile.coffee 文件时提供编码帮助。从Grunt 官方网站了解更多关于Gruntfile.js的信息。

全局安装 grunt-cli

  • 在嵌入式终端( Alt+F12) 中,键入:

    npm install -g grunt-cli

在项目中安装 Grunt

  • 在嵌入式终端( Alt+F12) 中,键入:

    npm install grunt --save-dev

从任务树运行 Grunt 任务

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

打开 Grunt 工具窗口

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

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

从 Grunt 工具窗口构建任务树

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

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

重建一棵树

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

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

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

    默认情况下,树会按照在Gruntfile.js中定义的顺序显示任务(选项定义顺序)。

运行任务或目标

  • 双击任务或目标。

  • 在树中选择任务或目标,然后从上下文菜单中按Enter或选择运行 <任务名称> 。

请注意,当您从任务树运行任务时,强制执行详细模式选项不可用。因此,您无法配置 PhpStorm,例如,忽略警告或提供详细日志。要使用这些选项,请从运行配置中运行任务或目标,如下面的根据运行配置运行和调试任务中所述

运行默认任务

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

运行多个任务或目标

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

跳转到任务或目标的定义

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

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

除了使用PhpStorm 在您从任务树运行任务或目标时自动创建的临时运行配置外,您还可以创建和启动自己的Grunt.js运行配置。

创建 Grunt.js 运行/调试配置

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

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

  3. 指定运行配置的名称、要运行的任务(使用空格作为分隔符)、定义这些任务的Gruntfile.js文件的位置以及全局安装的grunt-cli包的路径。

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

    (可选)指定特定于 Node.js 的选项参数和要传递给 Node.js的环境变量。

运行任务

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

调试任务

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

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

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

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

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

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

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

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

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

自动运行 Grunt 任务

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

  1. 设置/首选项对话框 ( Ctrl+Alt+S) 中,转到工具 | 启动任务

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

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

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

最后修改时间:2021 年 10 月 20 日