WebStorm 9.0.2 Web Help

Using Grunt Task Runner

WebStorm provides integration with the Grunt JavaScript Task Runner. Grunt support involves:

  • Parsing Gruntfile.js files, recognizing definitions of tasks and targets.
  • Building trees of tasks and targets.
  • Navigation between a task or a target in the tree and its definition in the Gruntfile.js file.
  • Running tasks and targets.
  • Configuring the task execution mode and output.

On this page:

Preparing to Install Grunt

  1. Download and install Node.js. The framework is required for two reasons:
    • The Grunt task runner is started through Node.js.
    • NPM, which is a part of the framework, is also the easiest way to download the Grunt task runner.

  2. If you are going to use the command line mode, make sure the following paths are added to the PATH variable:
    1. The path to the parent folder of the Node.js executable file.
    2. The path to the npm folder.

    This enables you to launch the Grunt task runner and npm from any folder.

  3. Make sure the NodeJS plugin is enabled.

    The plugin is not bundled with WebStorm, but it is available from the WebStorm plugin repository. Once enabled, the plugin is available at the IDE level, that is, you can use it in all your WebStorm projects. See Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins for details.

Installing Grunt

To use Grunt in a WebStorm project, you need two packages:

  • A globally installed grunt-cli package (Grunt command line interface) for executing Grunt commands.
  • A grunt package installed in the project to build the project tasks tree and provide coding assistance while editing the Gruntfile.js or Gruntfile.coffee file. Learn more about Gruntfile.json at http://gruntjs.com/getting-started#preparing-a-new-grunt-project.

These packages can be installed either in the command line mode or through the WebStorm user interface. In either case, installation is performed via npm.

Installing the Grunt Command Line Interface

  • Run the installation from the command line in the global mode:
    1. Launch the embedded Terminal by hovering your mouse pointer over show_tool_window_bars in the lower left corner of WebStorm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
    2. Switch to the directory where NPM is stored or define a PATH variable for it so it is available from any folder, see Installing NodeJs.
    3. Type the following command at the command line prompt:
      npm install -g grunt-cli

      For more details on the NPM operation modes, see npm documentation. For more information about installing the Grunt task runner, see https://npmjs.org/package/grunt-cli.

  • Run NPM from WebStorm using the Node.js and NPM page of the Settings dialog box.
    1. Open the Settings dialog box by choosing File | Settings or pressing Ctrl+Alt+S and click Node.js and NPM under Languages&Frameworks.
    2. On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click add.
    3. In the Available Packages dialog box that opens, select the required package to install.
    4. Select the Options check box and type -g in the text box next to it.
    5. Optionally specify the product version and click Install Package to start installation.

Installing Grunt in a project

  • Run the installation from the command line:
    1. Launch the embedded Terminal by hovering your mouse pointer over show_tool_window_bars in the lower left corner of WebStorm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
    2. Switch to the project root folder and type the following command at the command line prompt:
      npm install grunt
  • Run NPM from WebStorm using the Node.js and NPM page of the Settings dialog box.
    1. Open the project settings by choosing File | Settings or pressing Ctrl+Alt+S, see Accessing Settings for details. Then click Node.js and NPM under the Languages & Frameworks node.
    2. On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click add.
    3. In the Available Packages dialog box that opens, select the required package.
    4. Optionally specify the product version and click Install Package to start installation.

Running Grunt Tasks

Grunt tasks are launched from tasks trees in the dedicated Grunt Tool Window which opens when you invoke Grunt from a Gruntfile.js file. As soon as you invoke Grunt, it starts building a tree of tasks according to the Gruntfile.js on which it was invoked. The tree is shown in the left-hand pane of the tool window. If a task has targets, the task is displayed as a node and the targets are listed under it.

The result of task execution are displayed in the Grunt Console pane.

Building a Tasks Tree

  • If the Grunt tool window is not opened yet, do one of the following:
    • Select the required Gruntfile.js file in the Project tool window and choose Open Grunt Console on the context menu of the selection.
    • Open the required Gruntfile.js file in the editor and choose Open Grunt Console on the context menu of the editor.

    In either case, the Grunt tool window opens with the left-hand pane showing the tasks tree built according to the selected or opened Gruntfile.js file.

  • If the Grunt tool window is already opened, click the Add Gruntfile button add on the toolbar and choose the required Gruntfile.js file from the pop-up list. WebStorm adds a new tab and builds a tasks tree in it.
  • To re-build a tasks tree, switch to the required tab in the left-hand pane and click refresh on the toolbar.

Running Tasks

  • To run a task or a target, do one of the following:

    • Double click the required task or target in the tree.
    • Select the required task or target and choose Run <task name> on the context menu of the selection.
    • Select the required task or target and press Enter.
    • To run the default task, select the root node in the tree and choose Run default on the context menu of the selection.
    • To navigate to the definition of a task or target, select the required task or target in the tree and choose Jump to source on the context menu of the selection.

    The task or target execution output will be displayed in the right-hand, Grunt Console, pane. The name of the target is shown in the format <task name>:<target name>. The pane 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 pane.

  • 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 on the context menu of the selection.
  • To have Grunt ignore warnings and continue executing the launched task until the task is completed successfully or an error occurs, press the --f toggle button on the toolbar. Otherwise, the task execution is stopped by the first reported warning.
  • To have the verbose mode applied and thus have a full detailed log of a task execution displayed, press the --v toggle button on the toolbar.

Debugging Grunt Tasks

  1. Create a run configuration of the type NodeJS.
    1. Choose Run | Edit Configuration on the main menu. Alternatively, click Shift+Alt+F10 and select Edit Configuration from the pop-up menu.
    2. In the Edit Configuration dialog box, that opens, click the Add New Configuration toolbar button add.png, and choose Node.js on the context menu.
    3. Run/Debug Configuration: Node.js dialog box, that opens, specify the following:
      • The name of the configuration.
      • The location of the Node.js executable file.
      • In the JavaScript File field, specify the path to the Grunt command line interface, for example, <user_home>\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt, see Installing Grunt Command Line Interface.
      • In the Application parameters text bix, specify the Grunt tasks to run using spaces as separators. To ignore warnings and continue task execution, use the --force parameter. For example:
        --force uglify jshint

    For details, see Running and Debugging Node.js.

  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 tool bar and then choose Run | Debug <configuration name> on the main menu or click the Debug toolbar button debug.png.
  4. 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.

See Also

Last modified: 11 December 2014
comments powered by Disqus