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 WebStorm, you can run Grunt tasks from tasks trees in the dedicated Grunt tool window, or using a Grunt run configuration, or as a before-launch task. WebStorm shows the result of executing a task in the Run tool window. 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.
To use Grunt in a WebStorm project, you need two packages:
- A globally installed
grunt-clipackage (Grunt command line interface) for executing Grunt commands.
gruntpackage installed as development dependency to build the project tasks tree and provide coding assistance while editing the
Gruntfile.coffeefile. Learn more about
Gruntfile.jsfrom the Grunt Official website.
To install grunt-cli globally
- Open the built-in WebStorm Terminal (Alt+F12) and type
npm install -g grunt-cliat the command prompt.
To install Grunt in a project
- Open the built-in WebStorm Terminal (Alt+F12) and type
npm install grunt --save-devat the command prompt.
Running Grunt tasks from the tasks tree
WebStorm lets you run Grunt tasks easily and fast right from the tasks tree in the Grunt tool window. WebStorm automatically creates a temporary run configuration which you can save and use later, if necessary.
To open the Grunt tool window
- Select the required
Gruntfile.jsfile in the Project tool window or open it in the editor and choose Show Grunt Tasks on the context menu.
To build a tree of tasks from the Grunt tool window
- In the Grunt tool window, click on the toolbar and choose the required
Gruntfile.jsfile from the list. By default, WebStorm shows the
Gruntfile.jsfile in the root of your project.
- If you have another
Gruntfile.jsfile, click Choose Gruntfile.js and select the
Gruntfile.jsfile you need in the dialog that opens. WebStorm adds a new node with the path to the chosen
Gruntfile.jsfile on its title and builds a tasks tree under the new node.
To re-build a tree
- Switch to the required node and click on the toolbar.
To sort the tasks in a tree by their names
- Click on the toolbar, choose Sort by on 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).
To 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> on the context menu.
To run the default task
- Select the root node in the tree, and choose Run default on the context menu of the selection.
To 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 on the context menu of the selection.
To jump to the definition of a task or a target
- Select the required task or target in the tree, and choose Jump to source on the context menu of the selection.
Running and debugging tasks according to a run configuration
Besides using temporary run configurations that WebStorm creates automatically when you run tasks or targets from tasks tress, you can create and launch your own Grunt.js run configurations.
To create a Grunt.js run/debug configuration
- Choose on the main menu.
- Click on the toolbar and select Grunt.js from the pop-up list. The Run/Debug Configuration: Grunt.js dialog opens.
- Specify the name of the run configuration, the tasks to run (use blank spaces as separators), the location of the
Gruntfile.jsfile where these tasks are defined, and and the path to the globally installed
- Specify the Node.js interpreter to use, see Configuring a local Node.js interpreter for details.
To run the tasks
- Select the newly created run configuration from the list on the main toolbar and click next to the list. WebStorm displays the task output in the Run tool window.
To debug the tasks
- Create a Grunt.js run/debug configuration as described above.
- Open the
Gruntfile.jsfile in the editor and set the breakpoints in it where necessary.
- To start a debugging session, select the required debug configuration from the list on the main tool bar and click next to the list or choose .
- In the Debug tool window that opens, analyze the suspended task execution, step through the task, etc. as described in Examining Suspended Program and Stepping Through the Program.
To run a Grunt task as a Before-Launch task
- Open the Run/Debug Configurations Dialog dialog by choosing on the main menu, and select the required configuration from the list or create it anew by clicking and choosing the relevant run configuration type.
- In the dialog box that opens, click in the Before launch area and choose Run Grunt task from the drop-down list.
- In the Grunt task dialog box that opens, specify the
Gruntfile.jswhere 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
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.
- In the Settings/Preferences dialog (Ctrl+Alt+S), click Startup Tasks underTools.
- On the Startup Tasks page that opens, click on the toolbar.
- From the drop-down 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: Grunt.js page that opens. When you save the new configuration it is automatically added to the list of startup tasks.