WebStorm 2021.1 Help

咕噜声

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

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

在你开始前

确保您的计算机上有Node.js。

安装咕噜

要在 WebStorm 项目中使用 Grunt，您需要两个包：

  • 一个全局安装的 grunt-cli包（Grunt 命令行界面），用于执行 Grunt 命令。

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

全局安装 grunt-cli

  • 在嵌入式终端( Alt+F12) 中，键入：

    npm install -g grunt-cli

在项目中安装 Grunt

  • 在嵌入式终端( Alt+F12) 中，键入：

    npm install grunt --save-dev

从任务树运行 Grunt 任务

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

打开 Grunt 工具窗口

在 WebStorm 会话期间首次构建任务树时，Grunt工具窗口尚未打开。

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

从 Grunt 工具窗口构建任务树

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

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

重建一棵树

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

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

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

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

运行任务或目标

  • 双击任务或目标。

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

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

运行默认任务

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

运行多个任务或目标

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

跳转到任务或目标的定义

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

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

除了使用WebStorm 在您从任务树运行任务或目标时自动创建的临时运行配置外，您还可以创建和启动自己的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的环境变量。

运行任务

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

调试任务

  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 日
流 运行/调试配置：Grunt.js