WebStorm 2025.2 Help

Grunt

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

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

开始之前

请确保您的计算机上已安装 Node.js。

安装 Grunt

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

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

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

全局安装 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 工具窗口。

  • 在 Gruntfile.js 工具窗口中选择所需的 项目 文件 Alt+1 ，或在编辑器中打开该文件并从上下文菜单中选择 显示 Grunt 任务。

从 Grunt 工具窗口构建任务树

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

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

重新构建任务树

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

按名称排序树中的任务

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

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

运行任务或目标

  • 双击任务或目标。

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

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

运行默认任务

  • 在树中选择根节点，然后从所选内容的上下文菜单中选择 运行默认任务。

运行多个任务或目标

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

跳转到任务或目标的定义

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

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

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

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

  1. 转到 运行 | 编辑配置。 或者，从工具栏的 运行 按钮中选择 编辑配置。

    打开“编辑配置”对话框

    在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（添加按钮 ），然后从列表中选择 Grunt.js。 将打开 运行/调试配置：Grunt.js对话框。

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

  3. 指定要使用的 Node.js 解释器。

    如果选择 项目 别名，WebStorm 将自动使用 Node.js 页面中 Node 解释器 字段中的项目默认解释器。 在大多数情况下，WebStorm 会检测项目默认解释器并自动填写该字段。

    您也可以选择其他已配置的本地或远程解释器，或点击 浏览按钮 配置一个新的解释器。

    如需了解详情，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器以及 在 Windows 子系统中使用 Node.js。

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

运行任务

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

调试任务

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

  2. 在编辑器中打开 Gruntfile.js 文件，并在其中需要的位置设置 断点。

  3. 要开始调试会话，请从主工具栏的列表中选择所需的调试配置，然后点击其旁边的 调试按钮 ，或从主菜单选择 运行 | 调试 <configuration name>。

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

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

  1. 通过从主菜单中选择 运行 | 编辑配置 打开 运行/调试配置对话框 对话框，并从列表中选择所需的配置，或点击 添加按钮 并选择相关的运行配置类型以新建配置。

  2. 在打开的对话框中，点击 添加按钮 所在的 启动前 区域，然后从列表中选择 运行 Grunt 任务。

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

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

自动运行 Grunt 任务

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

  1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 工具 | 启动任务。

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

  3. 从列表中选择所需的 Grunt 运行配置。 该配置已添加至列表中。

    如果项目中没有可用的适用配置，请点击 添加按钮` 并选择 编辑配置。 然后在打开的 运行/调试配置页面上使用所需设置定义一个配置。 当您保存新配置时，它将自动添加到启动任务列表中。

最后修改日期： 2025年 9月 26日
GraphQL运行/调试配置：Grunt.js