IntelliJ IDEA 2025.2 Help

Grunt

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

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

开始之前

下载并安装 Node.js。

安装 Grunt

要在 一个 IntelliJ IDEA 项目中使用 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 任务

IntelliJ IDEA 允许您直接从 Grunt 工具窗口中的任务树中轻松快捷地运行 Grunt 任务。 IntelliJ IDEA 会自动创建一个临时运行配置，您可以根据需要将其保存并在以后使用。

打开 Grunt 工具窗口

当 您 在 一个 IntelliJ IDEA 会话期间首次构建任务树时， Grunt 工具窗口尚未打开。

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

从 Grunt 工具窗口构建任务树

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

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

重新构建树

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

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

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

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

运行任务或目标

  • 双击任务或目标。

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

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

运行默认任务

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

运行几个任务或目标

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

跳转到任务或目标的定义

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

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

除了使用 临时的 运行配置（在您从任务树运行任务或目标时 IntelliJ IDEA 会自动创建），您还可以创建和启动您自己的 Grunt.js 运行配置。

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

  1. 前往 运行 | 编辑配置。 或者，从工具栏上的 编辑配置 小部件中选择 运行。

    打开编辑配置对话框

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

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

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

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

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

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

运行任务

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

调试任务

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

  2. 请在编辑器中打开 Gruntfile.js 文件，并在必要的地方设置 断点。

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

  4. 在 Debug（调试）工具窗口 中，分析挂起的任务执行、逐步执行任务等内容，如 检查挂起的程序 和 逐步执行程序 中所述。

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

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

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

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

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

自动运行 Grunt 任务

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

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

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

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

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

最后修改日期： 2025年 9月 22日
FlowGulp