Grunt as a file watcher in PHP/Webstorm

Why would you want to use PHPStorm’s file watcher when Grunt has a perfectly capable watching service?

If you work with many projects at any one time, I think it’s important to be able to quickly jump from one project to another without having to remember to fire a run command in a terminal screen. With PHPStorm’s filewatchers I only have to worry about one app, my IDE – PHPStorm. Of course it is possible to compile stylesheets & javascript with PHPStorm directly as described here, but I prefer Grunt as it gives you a framework for defining production build patterns along side your dev building. So to plug your Grunt workflow into PHPStorm, first define your Grunt task without using the grunt watcher like so.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        compass: {
            dev: {
                options: {
                    require: 'susy',
                    sassDir: '../sass/',
                    cssDir: '../web/css/src',
                    outputStyle: 'expanded'
                }
            },
            prod:{
                options: {
                    require: 'susy',
                    sassDir: '../sass/',
                    cssDir: '../web/css',
                    outputStyle: 'compressed'
                }
            }
        },
        concat: {
            prod:{
                options: {
                    separator: ';'
                },
                src: ['../web/js/src/angular/*/*.js','../web/js/src/lib/*.js','../web/js/src/*.js'],
                dest: '../js/min/concat.js'

            }
        },
        uglify: {
            prod:{
                files: {
                    '../web/js/min/scripts.min.js': ['<%= concat.prod.dest %>']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-concat-css');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.registerTask('default', [ 'compass:dev']);
    grunt.registerTask('prod', [ 'compass:prod','concat:prod','uglify:prod']);
};

Now running ‘grunt’ in my grunt directory will run the default task and I can use ‘grunt prod’ to build for production. Make sure grunt alone works at this point.

Next I need to tell PHPStorm to run ‘grunt’ every time I edit an SCSS file. First double check where grunt is.

$ which grunt
/usr/local/bin/grunt

Now enter this into a new file watcher form.
Screen Shot 2014-04-17 at 12.32.28
Make sure you set the working directory to where your grunt file is. Now everytime you save an SCSS file your grunt task will execute.

This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Grunt as a file watcher in PHP/Webstorm

  1. wjr says:

    Cool cool. Ok, suppose you have a few people working on the project and only I have phpstorm, how can the rest of the team do this? It is a given that they won’t have a jetbrains IDE. Doesn’t this create an IDE dependency?

    How about other situations like the continuous ones (testing, build, deployment)?

Leave a Reply

Your email address will not be published. Required fields are marked *