WebStorm 9.0.0 Web Help

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.

    For details on using Node.js in WebStorm, see the section Node.js

    Tip

    Alternatively, you can define Node.js as an external tool, as described in the section Configuring third-party tools. This approach is helpful, when you need facilities that are missing in the plugin, for example, the possibility to pass certain parameters as wildcards.

  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

The Grunt Command Line Interface is implemented in the grunt-cli package which should be installed globally to make the functionality available in any WebStorm project and from any folder. Do one of the following:

  • 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 
                                  

      The -g key makes the task runner run in the global mode. Because the installation is performed through NPM, the Grunt task runner is installed in the npm folder. Make sure this parent folder is added to the PATH variable. This enables you to launch the task runner from any folder.

      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 project settings and then click Node.js and NPM.
    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 grunt-cli package.
    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

At the project level, the basic Grunt functionality is implemented in the grunt package. The package is responsible for building project trees of Grunt tasks and for coding assistance in editing the Gruntfile.js file. Do one of the following:

  • 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+SCtrl+Alt+SCtrl+Alt+SCtrl+Alt+SCtrl+Alt+SAlt+F7Ctrl+Alt+SCtrl+Alt+SCommand CommaCommand CommaCommand Comma, 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 a task
  • 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 EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter.
    • 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 ShiftShiftShiftShiftShiftShiftShiftShiftShiftShiftShift (for adjacent items) or CtrlCtrlCtrlCtrlCtrlCtrlCtrlCtrlCtrlCtrlCtrl   (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.

See Also

Reference:

External Links:

Web Resources: