Grunt

Install grunt-cli globally

• In the embedded Terminal (Ctrl+`) , type:

  npm install -g grunt-cli

Install Grunt in a project

• In the embedded Terminal (Ctrl+`) , type:

  npm install grunt --save-dev

Open the Grunt tool window

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

• Select the required Gruntfile.js file in the Project tool window or open it in the editor and choose Show Grunt Tasks from the context menu.

Build a tree of tasks from the Grunt tool window

1. In the Grunt tool window, click on the toolbar and choose the required Gruntfile.js file from the list. By default, JetBrains Rider 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. JetBrains Rider 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.

Re-build a tree

• Switch to the required node and click on the toolbar.

Sort the tasks in a tree by their names

• Click 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).

Run a task or a target

• Double-click the task or target.

• Select the task or target in the tree and press Enter 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 JetBrains Rider, 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 below.

Run the default task

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

Run several tasks or targets

• Use the multiselect mode: hold Shift (for adjacent items) or Ctrl (for non-adjacent items) keys and select the required tasks or targets, then choose Run or Debug from the context menu of the selection.

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.

Create a Grunt.js run/debug configuration

1. From the main menu, select Run | Edit Configurations. Alternatively, select Edit Configurations from the list on the toolbar.

   

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select Grunt.js from the list. The Run/Debug Configuration: Grunt.js 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 interpreter to use.

   If you choose the Project alias, JetBrains Rider will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, JetBrains Rider detects the project default interpreter and fills in the field itself.

   You can also choose another configured local or remote interpreter or click and configure a new one.

   Optionally specify the Node.js-specific option parameters and the environment variables to be passed to Node.js.

Run the tasks

• Select the newly created configuration from the Select run/debug configuration list on the toolbar and click the Run button () next to the list. JetBrains Rider displays the task output in the Run tool window.

Debug the tasks

1. Create a Grunt.js run/debug configuration as described above.

2. Open the Gruntfile.js file in the editor and set the breakpoints in it where necessary.

3. To start a debugging session, select the required debug configuration from the list on the main toolbar and click next to the list or select Run | Debug <configuration name> from the main menu.

4. In the Debug window that opens, analyze the suspended task execution, step through the task, and so on, as described in Examine suspended program and Step through code.

Run a Grunt task as a before-Launch task

1. Open the Run/debug configurations dialog dialog by selecting Run | Edit Configurations from the main menu, and select the required configuration from the list or create it anew by clicking and choosing the relevant run configuration type.

2. In the dialog that opens, click 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 interpreter, the parameters to pass to it, and the path to the grunt-cli package.

1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Tools | Startup Tasks.

2. On the Startup Tasks page that opens, click 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 and choose Edit Configurations. Then define a configuration with the required settings on the Run/Debug configuration page that opens. When you save the new configuration it is automatically added to the list of startup tasks.