We’ll need some tools…
- NodeJS installed
- The NodeJS plugin enabled
- The grunt-cli npm module installed
- A version of the Grunt runner has to be installed into our project
Installing NodeJS can be done by following the instructions on their website. Once done, we can enable the NodeJS plugin for PhpStorm through IDE Settings | Plugins, clicking the Install JetBrains Plugin… button and adding NodeJS to our IDE. A quick restart should activate and load the plugin. (Check out our tutorial about NodeJS in PhpStorm if you want to learn more about it.)
The grunt-cli module can be installed using npm. From the Terminal tool window (Tools | Open Terminal…), execute the
npm install -g grunt-cli command. Running
npm install grunt --save-dev will install the Grunt runner into our project. Alternatively, go to Project Settings | Node.js and npm, and click Add. In the popup window, search for both of these packages, enter -g (to install the package globally) under options and then click Install.
Running Grunt tasks
Once we have a GruntFile.js in place, we can run it from within the IDE! In our editor, the Open Grunt Console context menu will bring up the Grunt Console tool window in which we can run individual tasks and so on. Phing users will definitely recognize this.
From the Grunt Console, we can run individual tasks (double-click or select one and Enter) and see the output on the right. We can also select multiple tasks and run them at once. The toolbar on the left can be used to enable the
--force switch when running Grunt, or to enable/disable verbose mode.
This is a first pass on getting Grunt support into our IDE. Download the latest PhpStorm 8 EAP and give it a go! We would love to hear your thoughts, feature requests, issues and so on through the issue tracker, by posting in the comments below or in our forums!
Develop with pleasure!
– JetBrains PhpStorm Team