Automating Grunt Builds in PhpStorm

I’ve started using PhpStorm for doing PHP development. So far, it’s been great. I find that I need to have significantly fewer programs and windows open, and that it automates a lot of the tasks I was doing manually.

Today, I puzzled out how to have PhpStorm invoke Grunt instead of running grunt watch in a terminal window:

  1. Navigate to Project Settings > File Watchers.
  2. Click + > Custom.
  3. Name: Grunt.
  4. Show console: Always.
  5. Deselect Immediate File Synchronization.
  6. File type: Any.
  7. Scope: Click button.
    1. Click + and add a new scope – name it Grunt Watch, click OK.
    2. Expand this window.
    3. With your scope selected, browse in the file tree and select directories that Grunt would be watching and click Include Recursively.
    4. Select files that Grunt is outputting (such as minified CSS and JS files) that you included in the previous step and click Exclude (this prevents the resulting output file from endlessly re-triggering Grunt execution).
    5. Click OK.
  8. Program: (browse to grunt executable path).
  9. Working Directory: (browse to the directory that contains the Grunt file).
  10. Click OK to create the File Watcher.
  11. Click OK to exit the Preferences dialog.

2 thoughts on “Automating Grunt Builds in PhpStorm”

Leave a Reply