PhpStorm 2019.2 Help

Keymap:

Grunt

PhpStorm integrates with the Grunt JavaScript Task Runner. PhpStorm 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 PhpStorm, 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. PhpStorm 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.

Installing Grunt

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.

To install grunt-cli globally

In the embedded Terminal (Alt+F12), type:

npm install -g grunt-cli

To install Grunt in a project

Running Grunt tasks from the tasks tree

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

To open the Grunt tool window

When you build a tree of tasks for the first time during a PhpStorm 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.

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.js file from the list. By default, PhpStorm shows the Gruntfile.js file in the root of your project.

If you have another Gruntfile.js file, click Choose Gruntfile.js and select the Gruntfile.js file you need in the dialog that opens. PhpStorm 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.

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

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> 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 PhpStorm, 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.

To run the default task

Select the root node in the tree, and choose Run default from the context menuu 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 from 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 from the context menu of the selection.

Running and debugging tasks according to a run configuration

Besides using temporary run configurations that PhpStorm 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

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 and the path to the globally installed grunt-cli package.

To run a Grunt task as a Before-Launch task

Open the Run/Debug Configurations Dialog dialog by choosing Run | Edit Configurations 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 that opens, click in the Before launch area and choose Run Grunt task from the list.

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.

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.

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: Grunt.js page that opens. When you save the new configuration it is automatically added to the list of startup tasks.