PyCharm 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:
-
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.
-
If you are going to use the command line mode, make sure the following paths are added to the
PATH
variable:- The path to the parent folder of the Node.js executable file.
-
The path to the
npm
folder.
This enables you to launch the Grunt task runner and npm from any folder.
-
Install and enable the NodeJS plugin.
The plugin is not bundled with PyCharm, but it is available from the PyCharm plugin repository.
Once enabled, the plugin is available at the IDE level, that is, you can use it in all your PyCharm projects. See Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins for details.
Installing Grunt
To use Grunt in a PyCharm 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 theGruntfile.js
orGruntfile.coffee
file. Learn more aboutGruntfile.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 PyCharm user interface. In either case, installation is performed via npm.
The Grunt Command Line Interface is implemented in the grunt-cli
package which should be installed globally
to make the functionality available in any PyCharm project and from any folder.
Do one of the following:
-
Run the installation from the command line in the global mode:
-
Launch the embedded Terminal
by hovering your mouse pointer over
in the lower left corner of PyCharm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
-
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. -
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 thenpm
folder. Make sure this parent folder is added to thePATH
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
.
-
Launch the embedded Terminal
by hovering your mouse pointer over
-
Run NPM from PyCharm using the Node.js and NPM page of the Settings dialog box.
- Open the Settings dialog box by choosing or pressing Ctrl+Alt+S and click Node.js and NPM under Languages&Frameworks.
-
On the packagePage page that opens, the Packages area shows all the engineDependent packages
that are currently installed on your computer, both at the global and at the project level.
Click
.
- In the Available Packages dialog box that opens, select the required package to install.
-
Select the Options check box and type
-g
in the text box next to it. - Optionally specify the product version and click Install Package to start installation.
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:
-
Launch the embedded Terminal
by hovering your mouse pointer over
in the lower left corner of PyCharm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
-
Switch to the project root folder and type the following command at the command line prompt:
npm install grunt
-
Launch the embedded Terminal
by hovering your mouse pointer over
-
Run NPM from PyCharm using the Node.js and NPM page of the Settings dialog box.
- Open the Settings dialog box by choosing or pressing Ctrl+Alt+S, see Accessing Settings for details. Then click Node.js and NPM under the Languages & Frameworks node.
-
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
.
- In the Available Packages dialog box that opens, select the required package.
- Optionally specify the product version and click Install Package to start installation.
Running Grunt Tasks
Grunt tasks are launched in two ways:
-
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 theGruntfile.js
on which it was invoked. If a task has targets, the task is displayed as a node and the targets are listed under it.
- According to a dedicated run configuration, see Run/Debug Configuration: Grunt.Js.
Running Grunt Tasks from the Tasks Tree
Running Grunt tasks right from the tasks tree is easy and fast, the only disadvantage of this approach is that such important additional options as force execution and verbose mode are not available in this mode. As a result, you cannot have PyCharm, for example, ignore warnings or provide a detailed log.
The result of task execution are displayed in the Grunt Console pane. The pane shows the toolName 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.
-
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. -
Select the required
-
If the Grunt tool window is already opened, click the Add Gruntfile button
on the toolbar and choose the required
Gruntfile.js
file from the list. PyCharm adds a new node and builds a tasks tree in it. The title of the node shows the path to theGruntfile.js
file according to which the tree is built. -
To re-build a tasks tree, switch to the required node and click
on the toolbar.
-
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 Grunt Console pane of the Run tool window. 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.
Running and Debugging Tasks According to a Run Configuration
Besides using temporary run configurations that PyCharm creates automatically, you can create and launch your own Grunt.js run configurations. For details about run configurations, see Run/Debug Configuration and Creating and Editing Run/Debug Configurations.
- Choose Shift+Alt+F10 and select Edit Configuration from the pop-up menu. on the main menu. Alternatively, click
-
Click the Add New Configuration button
on the toolbar and select Grunt.js from the pop-up list.
-
In the Run/Debug Configuration: Grunt.Js dialog box that opens, specify the name of the run configuration,
the tasks to run (use blank spaces as separators),
the location of the
Gruntfile.js
file to retrieve the definitions of the tasks from, and the path to theGulp
package installed locally, under the project root.Specify the location of the Node executable file and the NodeJS-specific options to be passed to this executable file, see Node parameters for details.
If applicable, specify the environment variables
for the NodeJS executable file.
To have Grunt ignore warnings and continue executing the launched task until the task is completed successfully or an error occurs, select the --f check box. 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, select the --v check box.
Select the run configuration from the list on the main tool bar and then choose Run toolbar button .
- Create a Grunt.js run/debug configuration, see above.
-
Open the
Gruntfile.js
file 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 then choose Debug toolbar button
.
on the main menu or click the - 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.