PHPStorm, grunt.js and File Watchers

I had a pickle of a time getting grunt.js to work on my Mac. So eventually I gave up and decided to use PhpStorm's built in watchers to do my tasks.

I highly recommend you get this all working in Grunt first. Once things work as expected there, then you can set up PhpStorm.

Tested with PhpStorm 7.1.1, node 0.10.25, grunt-cli 0.1.13 and grunt 0.4.2.

Project Structure

In this project, we have a bunch of HTML sections that are baked together. For example, the header, nav, and footer are html files that are "baked" into a final file in the build directory. In a css subfolder we have all our css (/css/styles.less and /css/custom/, /css/vendor/ for Bootstrap) which are combined via Less into one final /build/css/styles.css file. And the JS files are also copied to the build folder.

LESS

This was by far the easiest. If you've already got this to work then you don't need any help. I simply had to change the default "Output paths to refresh" from "$FileNameWithoutExtension$.css" to be "$ProjectFileDir$/build/css/$FileNameWithoutExtension$.css" and it worked.

Grunt Tasks

This was the tricky bit, as I wasn't methodical enough. Assuming that you have installed grunt globally then the following settings will work. 

• Name: Grunt Bake
• Description: Builds HTML (obviously change these two to what you want them to be)
• Turn off immediate file synchronization
• File type: HTML files
• Scope: Changed files. This is under VCS, probably at the bottom of the drop down. This stops the watcher being triggered when the file is created in the final build folder.
• Program: On a mac, with grunt installed globally, it is /usr/local/bin/grunt. Run "which grunt" in your terminal to figure it out (sorry Window's users, I don't know the command for you).
• Arguments: This is the name of the task. For me, I added this line to the Gruntfile.js. "grunt.registerTask('phpstorm-bake', ['bake'] );" Which means my argument is phpstorm-bake
• Working directory: $ProjectFileDir$

That's it. 

It's beyond the scope of this article how to get grunt and it's associated tasks up and running. There are plenty of handy tutorials and documentation on the web for that already.