LiveReload and Grunt Working in Harmony

March 31st, 2015

I had a little trouble setting up LiveReload when I first started using Grunt, so I thought I’d show you how to set this up. I use Chrome to do all of my testing, so I will reference how to do this using Chrome, but LiveReload also works in Safari and Firefox. I’m also assuming that you know what Grunt is and how to use it.

Setting Up LiveReload

The first thing to do is download LiveReload from their website, or, if you are on a Mac, you can download it from the App Store. This actually isn’t a necessary step, and I was able to get everything working using only the LiveReload browser extension. But I decided to go ahead and purchase LiveReload (only $9.99 in the Mac App Store) because I want to support a good product. Also, there might be projects where I decide not to use Grunt. The LiveReload app will compile SASS, Less, Stylus and a bunch of other languages as well. Install the app, and open it up on your computer.

The next step is to tell LiveReload which websites you want it to reload automatically for you. This is as simple as dragging and dropping the folder where you website resides on your computer onto the app.

LiveReload will then give you a little chunk of Javascript to drop before the </body> tag of all of your pages. My issue with this is remembering to remove the snippet of code when I push live, since it’s an additional HTTP request that would possibly slow down the load time of my website. Instead, LiveReload offers browser extensions for Safari, Chrome and Firefox. The extension only requires you to remember to press a button in your bookmarks bar to get it working. And if you forget to turn it off when you are finished, no harm done. Let’s use this instead.

Download the extension for your browser of choice. In Chrome, if you would like to use the LiveReload extension with local files (and we all should be testing and building our websites locally), you have to make sure to allow access to those local files in your browser. In Chrome, go to “More Tools” > “Extensions”, and then click the checkbox under the LiveReload extension that says “Access to local URLs.”

As of now, the Safari browser plugin will not let you test locally because of API restrictions. All the better reason to use Chrome for your testing!

Configuring Your Gruntfile.js

Now it’s time to set up your Grunt files. My current Gruntfile.js looks something like this:

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: {
                    'css/styles.css': 'css/sass/styles.scss'
                }
            }
        },
        autoprefixer: {
            single_file: {
                src: 'css/styles.css',
                dest: 'css/styles.css'
            }
        },
        cssmin: {
            combine: {
                files: {
                    'style.css': 'css/styles.css'
                }
            }
        },
        watch: {
            css: {
                files: ['css/sass/*.scss'],
                tasks: ['css']
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task(s).
    grunt.registerTask('css', ['sass', 'autoprefixer', 'cssmin']);

};

As you can see, I am using the SASS, Autoprefixer and CSSMin Grunt plugins to pre-process, auto-prefix and minify my CSS. A pretty standard setup. I also have the Watch plugin, which is set up to run the CSS task of pre-processing, auto-prefixing and minifying my CSS whenever I make a change to any of the .scss files in my css/sass folder.

This is great, except now we want to tell Grunt: “Whenever I make an edit to a .scss file, not only do I want you to pre-process, auto-prefix and minify my CSS, I also want you to notify the browser that I’m using that I made an update to these files so that it can refresh the page without having to do it myself.”

The first thing to do is tell the Watch plugin to use it’s built-in LiveReload feature to refresh the browser for you:

watch: {
    options: {
        livereload: true
    },
    css: {
        files: ['css/sass/*.scss'],
        tasks: ['css']
    }
}

Turn It On and Get To Work

All you have to do now is go to your browser and click on the LiveReload button to turn it on. When it is off, the little circle in the middle will be grey, and when it is on, it will turn black.

Leave a Reply