Gruntfile for Pattern Lab + Compass + Live Reload via grunt-browser-sync

Gruntfile.js

/*
    Gruntfile for Pattern Lab + Compass + Live Reload via grunt-browser-sync

    Set up to use browser-sync because for the life of me I can't get
    the grunt-contrib-watch livereload to *inject* the compiled CSS changes
    to the browser (as opposed to livereload doing a full page refresh)...
    
    (To be clear, the CSS injection I'm talking about is where changes to
    the CSS file are slipped in to the browser very quickly with no
    full page reload, and without losing your place if you've scrolled
    down the page, have a modal popup window open, etc. In my experience,
    this takes the update time from roughly 1 second down to maybe 1/10th
    of a second, making CSS editing and previewing very snappy!)

    You can use the 'proxy' option for the browserSync task, but it seems
    to be significantly faster if you add the browser-sync <script> tags to
    your PatternLab _foot.mustache file (when you run grunt you'll be given
    the appropriate tags to include).

    I'm still using grunt-contrib-watch's Livereload to reload the browser
    display when a Pattern Lab pattern changes.

    Theoretically this setup should allow you to sync browser testing for
    your patterns between multiple devices, too.

    Inspiration from this blog post by Joseph Fitzsimmons:
    http://josephfitzsimmons.com/home/pattern-lab-with-grunt-and-live-reload/

    Dependencies:
    - grunt-contrib-watch
    - grunt-browser-sync
    - grunt-contrib-compass
    - grunt-shell
*/
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            // Watch our Sass files for changes...
            sass: {
                files: [ 'source/css/**/*.{scss,sass}' ],
                tasks: [ 'compass' ],
                options: {
                    spawn: false
                }
            },
            // Keep an eye on the Pattern Lab pattern templates...
            html: {
                files: [
                    'source/_patterns/**/*.mustache',
                    'source/_patterns/**/*.json',
                    'source/_data/*.json'
                ],
                tasks: [ 'shell:patternlab' ],
                options: {
                    spawn: false,
                    livereload: true
                }
            }
        },
        compass: {
            dist: {
                options: {
                    sassDir: 'source/css/',
                    cssDir: 'public/css/'
                }
            }
        },
        shell: {
            patternlab: {
                command: "php core/builder.php -pg"
            }
        },
        browserSync: {
            bsFiles: {
                src: 'public/css/style.css'
            },
            options: {
                watchTask: true
            }
        }
    });

    grunt.loadNpmTasks('grunt-shell');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-browser-sync');

    grunt.registerTask('default',["browserSync","watch"]);

};