# Grunt

> **TL;DR**
> Required plugin:
>
>
>
> `JavaScript and TypeScript` -    the plugin is bundled with IntelliJ IDEA and enabled by default.

IntelliJ IDEA integrates with the [Grunt JavaScript Task Runner](http://gruntjs.com/).      IntelliJ IDEA parses `Gruntfile.js` files, recognizing definitions of tasks and targets, shows tasks and targets in a tree view, lets you navigate between a task or a target in the tree and its definition in the `Gruntfile.js` file, and supports running and debugging tasks and targets.

With IntelliJ IDEA, you can run Grunt tasks from tasks trees in the dedicated [Grunt tool window](grunt-tool-window.html), or using a  [Grunt run configuration](run-debug-configuration-grunt.html), or as a before-launch task. IntelliJ IDEA shows the result of executing a task in the [Run tool window](run-tool-window.html).  The tool window shows the Grunt output, reports the errors occurred, lists the packages or plugins that have not been found, etc. The name of the last executed task is displayed on the title bar of the tool window.

## Before you start

Download and install [Node.js](http://nodejs.org/#download).

## Installing Grunt

To use Grunt in an IntelliJ IDEA project, you need two packages:

* A globally installed grunt-cli package (Grunt command-line interface) for executing Grunt commands.

* A grunt package installed as development dependency to build the project tasks tree and provide coding assistance while editing the `Gruntfile.js` or `Gruntfile.coffee` file. Learn more about `Gruntfile.js` from the [Grunt official website](http://gruntjs.com/getting-started#preparing-a-new-grunt-project).

Procedure: Install grunt-cli globally

* In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , type:

`npm install -g grunt-cli`

Procedure: Install Grunt in a project

* In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , type:

`npm install grunt --save-dev`

## Running Grunt tasks from the tasks tree

IntelliJ IDEA lets you run Grunt tasks easily and fast right from the tasks tree in the Grunt tool window. IntelliJ IDEA automatically creates a temporary run configuration which you can save and use later, if necessary.

Procedure: Open the Grunt tool window

When you build a tree of tasks for the first time during an IntelliJ IDEA session, the Grunt tool window is not opened yet.

* Select the required `Gruntfile.js` file in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)))  or open it in the editor and choose Show Grunt Tasks from the context menu.

Procedure: Build a tree of tasks from the Grunt tool window

1. In the Grunt tool window, click ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) on the toolbar and choose the required `Gruntfile.js` file from the list.         By default, IntelliJ IDEA shows the `Gruntfile.js` file in the root of your project.

2. If you have another `Gruntfile.js` file, click Choose Gruntfile.js and select the `Gruntfile.js` file you need in the dialog that opens. IntelliJ IDEA adds a new node with the path to the chosen `Gruntfile.js` file on its title and builds a tasks tree under the new node.

Procedure: Re-build a tree

* Switch to the required node and click ![Reload Scripts](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.refresh.svg) on the toolbar.

Procedure: Sort the tasks in a tree by their names

* Click ![Settings](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.general.gear.svg) on the toolbar, choose Sort by from the menu, and then choose Name.

By default, a tree shows the tasks in the order in which they are defined in `Gruntfile.js` (option Definition order).

Procedure: Run a task or a target

* Double-click the task or target.

* Select the task or target in the tree and press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) or choose Run <task name> from the context menu.

Note that when you run tasks from a tasks tree, the force execution and verbose mode options are not available. As a result, you cannot configure IntelliJ IDEA, for example, to ignore warnings or provide a detailed log. To use these options, run tasks or targets from a run configuration as described in [Running and debugging tasks according to a run configuration](#ws_grunt_run_debug_task_by_run_configuration) below.

Procedure: Run the default task

* Select the root node in the tree, and choose Run default from the context menuu of the selection.

Procedure: Run several tasks or targets

* Use the multiselect mode: hold `Shift` (Windows), `Shift` (macOS), `Shift` (IntelliJ IDEA Classic (macOS)), `Shift` (macOS System Shortcuts), `Shift` (XWin), `Shift` (GNOME), `Shift` (KDE), `Shift` (Emacs), `Shift` (Sublime Text), `Shift` (Sublime Text (macOS)), `Shift` (NetBeans), `Shift` (Visual Studio), `Shift` (Visual Studio (macOS)), `Shift` (Eclipse), `Shift` (Eclipse (macOS)) (for adjacent items) or `Ctrl` (Windows), `Ctrl` (macOS), `Ctrl` (IntelliJ IDEA Classic (macOS)), `Ctrl` (macOS System Shortcuts), `Ctrl` (XWin), `Ctrl` (GNOME), `Ctrl` (KDE), `Ctrl` (Emacs), `Ctrl` (Sublime Text), `Ctrl` (Sublime Text (macOS)), `Ctrl` (NetBeans), `Ctrl` (Visual Studio), `Ctrl` (Visual Studio (macOS)), `Ctrl` (Eclipse), `Ctrl` (Eclipse (macOS)) (for non-adjacent items) keys and select the required tasks or targets, then choose Run or Debug from the context menu of the selection.

Procedure: Jump to the definition of a task or a target

* Select the required task or target in the tree, and choose Jump to source from the context menu of the selection.

## Running and debugging tasks according to a run configuration

Besides using temporary run configurations that IntelliJ IDEA creates automatically when you run tasks or targets from tasks tress, you can create and launch your own Grunt.js run configurations.

Procedure: Create a Grunt.js run/debug configuration

1. Go to `Run | Edit Configurations`. Alternatively, select Edit Configurations from the Run widget on the toolbar.

![Open the Edit Configurations dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_node_run_config_create.png)

In the Edit Configurations dialog that opens,

click the Add button (![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg)) on the toolbar and select Grunt.js from the list.  The [Run/Debug Configuration: Grunt.js](run-debug-configuration-grunt.html) dialog opens.

2. Specify the name of the run configuration, the tasks to run (use blank spaces as separators), the location of the `Gruntfile.js` file where these tasks are defined, and the path to the globally installed grunt-cli package.

3. Specify the Node.js runtime to use.

If you choose the Project alias, IntelliJ IDEA will automatically use the project default interpreter from the Node runtime field on the [JavaScript Runtime](javascript-runtime.html) page . In most cases, IntelliJ IDEA detects the project default runtime and fills in the field itself.

You can also choose another configured local or remote interpreter or click ![the Browse button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.general.ellipsis.svg) and configure a new one.

Optionally specify the [Node.js-specific option parameters](run-debug-configuration-node-js.html#node_parameters) and the [environment variables](https://www.w3schools.com/nodejs/nodejs_environment.asp) to be passed to Node.js.

The definitions of variables are displayed in the Environment variables field with semicolons (`;`) as separators, for example:

* `NODE_PATH` A list of additional directories to search when resolving modules. To separate directories in a list, use colon (`:`) on macOS or Linux, use semicolon (`;`) on Windows.

* `NODE_MODULE_CONTEXTS` Set to 1 to load modules in their own global contexts.

* `NODE_DISABLE_COLORS` Set to 1 to disable colors in the REPL.

![Environment variables](https://resources.jetbrains.com.cn/help/img/idea/2026.2/nodeEnvironmentVariables.png)

Alternatively, click Browse ![the Edit environment variables](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.inline.variables.svg) to the right of the field and configure a list of variables in the Environment Variables dialog, that opens:

* Use ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg), ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.remove.svg), ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.copy.svg) and ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.paste.svg) buttons to manage the list of custom variables.

* The dialog also shows a list of available system environment variables. Clear the Include system environment variables checkbox if you don't want to use the system environment variables for the current configuration.

* Click OK, when ready.

Procedure: Run the tasks

* From the Run/Debug Configurations widget list on the toolbar, select the newly created  configuration and click ![the Run button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.run.svg) next to it.  IntelliJ IDEA displays the task output in the [Run tool window](run-tool-window.html).

Procedure: Debug the tasks

1. Create a Grunt.js run/debug configuration [as described above](#createGruntRunConfig).

2. Open the `Gruntfile.js` file in the editor and set the [breakpoints](using-breakpoints.html) in it where necessary.

3. To start a debugging session,  select the required debug configuration from the list on the main toolbar and click ![the Debug button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.debug.svg) next to the list or select `Run | Debug <configuration name>` from the main menu.

4. In the [Debug tool window](debug-tool-window.html)  that opens, analyze the suspended task execution, step through the task, and so on, as described in [Examine suspended program](examining-suspended-program.html) and [Step through the program](stepping-through-the-program.html).

Procedure: Run a Grunt task as a before-Launch task

1. Open the [Run/debug configurations dialog](run-debug-configurations-dialog.html) dialog by selecting `Run | Edit Configurations` from the main menu, and select the required configuration from the list or create it anew by clicking ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) and choosing the relevant run configuration type.

2. In the dialog that opens, click ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) in the Before launch area and choose Run Grunt task from the list.

3. In the Grunt task dialog that opens, specify the `Gruntfile.js` where the required task is defined, select the task to execute, and specify the arguments to pass to the Grunt tool.

Specify the location of the Node.js runtime, the parameters to pass to it, and the path to the grunt-cli package.

## Running Grunt tasks automatically

If you have some tasks or targets that you run on a regular basis, you can add the corresponding run configurations to a list of startup tasks. The tasks will be executed automatically on the project start-up.

Procedure:

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Tools | Startup Tasks`.

2. On the [Startup Tasks page](settings-tools-startup-tasks.html) that opens, click ![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) on the toolbar.

3. From the list, choose the required Grunt run configuration. The configuration is added to the list.

If no applicable configuration is available in the project, click ![the Add button`](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) and choose Edit Configurations. Then define a configuration with the required settings on the [Run/Debug configuration](run-debug-configuration-grunt.html) page that opens. When you save the new configuration it is automatically added to the list of startup tasks.

## See also

### External Links

[http://gruntjs.com/getting-started](http://gruntjs.com/getting-started) [http://gruntjs.com/using-the-cli](http://gruntjs.com/using-the-cli)

### Reference

[Run/Debug Configuration: Grunt.js](run-debug-configuration-grunt.html) [Grunt tool window](grunt-tool-window.html) [Startup Tasks](settings-tools-startup-tasks.html)

### Procedures

[npm, pnpm, and Yarn](installing-and-removing-external-software-using-node-package-manager.html)