Grunt 工具窗口

使用此工具窗口运行 Grunt tasks。任务执行结果显示在运行工具窗口中。该工具窗口显示 Grunt 输出、报告出现的错误、列出未找到的包或插件等。上次执行的任务名称显示在工具窗口的标题栏中。

开始之前

下载并安装 Node.js。
全局安装 grunt-cli （Grunt 命令行界面）包，并将 grunt 包作为开发依赖安装。如需了解更多信息，请参阅安装 Grunt。

运行任务与目标

打开 Grunt 工具窗口

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

构建任务树

在 Grunt 工具窗口中，点击工具栏上的，然后从列表中选择所需的 Gruntfile.js 文件。默认情况下，WebStorm 会在项目根目录下显示 Gruntfile.js 文件。
如果存在其他 Gruntfile.js 文件，点击选择 Gruntfile.js ，在打开的对话框中选择所需的 Gruntfile.js 文件。 WebStorm 会添加一个新节点，在其标题中显示所选 Gruntfile.js 文件的路径，并在该节点下构建任务树。

重新构建任务树

切换到所需节点并点击工具栏上的。

按名称排序任务树中的任务

点击工具栏上的，在菜单中选择排序方式，然后选择名称。
默认情况下，树状结构按在 Gruntfile.js 中定义任务的顺序显示（选项定义顺序）。

运行任务或目标

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

运行默认任务

在树中选择根节点，然后在所选项的上下文菜单中选择运行默认。

运行多个任务或目标

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

跳转到任务或目标的定义

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

工具栏

	添加 Gruntfile	单击此按钮可为另一个 Gruntfile.js 文件构建任务树。从列表中选择所需的 Gruntfile.js 文件。 WebStorm 会添加一个新节点并在其下构建任务树。
	移除 Gruntfile	单击此按钮以移除所选节点下的任务树。
	重新加载任务	单击此按钮可重新构建所选节点下的任务树。由于 Grunt 不支持即时更新任务树，当更新相应的 Gruntfile.js 文件后，可能需要重新构建任务树。
	全部折叠	单击此按钮以隐藏所有任务树，仅显示 Gruntfile.js 节点。
		单击此按钮以配置当前视图并更改工具窗口的查看模式。如需详细信息，请参阅工具窗口视图模式。请注意，大多数菜单项是可切换的选项。已启用的选项其名称左侧会显示复选标记。 Grunt 专属选项包括： Grunt 设置：选择此选项以打开 Grunt 设置对话框，并更新 Grunt 和 Node 解释器的当前设置，详见 Grunt。排序方式：选择此选项以配置任务在树中显示的顺序。单击工具栏上的，从菜单中选择排序方式，然后选择名称。默认情况下，任务在树中的显示顺序与其在 Gruntfile.js 中定义的顺序一致（选项定义顺序）。
	隐藏	单击此按钮以隐藏工具窗口。若要再次显示该窗口，请在主菜单中选择视图 \| 工具窗口 \| Grunt。工具窗口将再次显示，并展示所有以前生成的任务树。

树的上下文菜单

Grunt 设置	选择此菜单项以打开 Grunt 设置对话框，并查看或编辑 Node.js 配置
跳转到源	选择此菜单项以打开构建当前任务树的 Gruntfile.js 文件。
重新加载任务	选择此菜单项以重新构建所选节点下的任务树。
复制路径	选择此菜单项以将构建当前任务树所依据的 Gruntfile.js 文件路径复制到剪贴板。
移除 Gruntfile.js	选择此菜单项以移除所选节点下的任务树。

任务或目标的上下文菜单

运行 <task/target name>	选择此菜单项以运行所选任务或目标。
调试 <task/target name>	选择此菜单项以调试所选任务或目标。
编辑 <task/target name> 设置	选择此菜单项以打开运行/调试配置对话框，并编辑所选任务或目标的预定义设置。
跳转到源	选择此菜单项以打开构建当前任务树的 Gruntfile.js 文件，并导航到所选任务或目标的定义处。

最后修改日期： 2025年 9月 26日