Gruntfile for Pattern Lab + Compass + LiveReload

Gruntfile.js

/*
    Gruntfile for Pattern Lab + Compass + LiveReload

    This is a sample Gruntfile for integrating Pattern Lab's template
    regeneration with Compass and LiveReload.

    I've found that using the Chrome LiveReload extension is slow as it
    forces a full-page browser reload instead of using CSS injection. This
    Gruntfile setup seems to work great, though, if you use the LiveReload
    JS snippet instead. Just add this script right before the closing
    </body> tag in your _patterns/00-atoms/00-meta/_01.foot.mustache file:

        <script src="//localhost:35729/livereload.js"></script>

    If you really don't want to insert the script tag manually, you could
    alternatively use an additional module like grunt-browser-sync or
    grunt-contrib-connect to insert the Live Reload JS snippets for you.
    Doing so adds the awesome CSS injection feature that Live Reload
    is supposed to have, but in my experience the basic livereload.js
    snippet is even faster, despite the refresh! This might need
    further experimentation...

    Dependencies:
        * grunt
        * grunt-contrib-compass
        * grunt-contrib-watch
        * grunt-shell

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

    Extra inspiration and noodling provided by @joemcgill:
    https://gist.github.com/joemcgill/9236cb10f271035414e6
*/
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {

            // Set our watch options for livereload
            options: {
                livereload: {
                    options: {
                        livereload: true
                    },
                    files: ['public/**/*']
                }
            },

            // Watch our Sass files for changes...
            sass: {
                files: [ 'source/css/**/*.{scss,sass}' ],
                tasks: [ 'compass' ]
            },

            // Keep an eye on the Pattern Lab pattern templates...
            patterns: {
                files: [
                    'source/_patterns/**/*.mustache',
                    'source/_patterns/**/*.json',
                    'source/_data/*.json'
                ],
                tasks: [ 'shell:patternlab' ],
                options: {
                    spawn: false,
                    livereload: true
                }
            }
        },

        // Process our .scss files using Compass.
        compass: {
            dist: {
                options: {
                    sassDir: 'source/css/',
                    cssDir: 'public/css/'
                }
            }
        },

        // Rebuilds our Pattern Lab site if a template file has changed.
        shell: {
            patternlab: {
                command: "php core/builder.php -pg"
            }
        }

    });

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

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

};

If you want to go the route of using a tool like grunt-browser-sync or grunt-contrib-connect to handle the insertion of the Live Reload JS snippet, you might want to look at this Gruntfile instead: https://gist.github.com/adamnorwood/11382783