A Quick Guide to Using LiveReload with Gulp

Introduction

Tired of having to refresh your browser every single time you make changes to your LESS/SASS/CSS files? This article will take you step-by-step to getting LiveReload integrated in your development environment so you no longer have to reload your browser to see changes. For this tutorial, we’ll be using Gulp. If you’re unfamiliar with it, check out these awesome and super easy Scotch resources about it:

• Getting Started with Less
• Automate Your Tasks Easily with Gulp.js
• Our Gulp Starter on GitHub
• Our Gulp and Less Starter Kit

Overview

LiveReload is an amazing piece of software that can really help improve your workflow - especially when it comes to CSS. The purpose of this article is to get you started in that direction as quickly and as easily as possible. In this article, we’ll cover:

1. A brief overview
2. The logistics - making sure you have everything downloaded to get things running
3. Editing a Gulp file to setup Livereload based on this Gulp and Less Starter
4. Seeing LiveReload in action

What is LiveReload?

Imagine a “happy land” where browsers don’t need a Refresh button. Well, that’s exactly what Andrey Tarantsov set out accomplish. LiveReload monitors changes in your file system (for example, your CSS or your images). As soon as a change is detected, such as a simple “save”, the browser is refreshed automatically. In this example, we will be examining LiveReload through editing LESS files.

We’ll be setting up LiveReload with Gulp. A lot of people immediately think that you have to purchase this software. The truth is, using LiveReload with Gulp is completely free to use. The creators of LiveReload sell a for-purchase app that makes it ridiculously easy to use.

LiveReload can also be utilized through other task runners, such as Grunt and Yeoman. And of course, we can use LiveReload for when we change our Javascript. I talk about its implementation towards the end of the tutorial.

Lastly, it’s you may see that LiveReload is called LiveReload 3 on it’s GitHub repo compared to LiveReload 2 in the Chrome Store. There is no need to worry about conflicting versions, the way we are implementing it will work perfectly regardless of version.

Supplies Needed

Change directory cd into the folder where your gulpfile.js and package.json is located via the command line. Once you are there, enter in the following command:

npm install --save-dev gulp-livereload

Next, we need to download the Google Chrome extension LiveReload, go to the Chrome Store and download it here. Make sure you can view it in your tool bar and that the circle is filled in with black. This is important or else it won’t work.

Use incognito to manage sessions? You can enable Livereload in incognito by navigating to “More Tools”, clicking “Extensions”, and then checking the box to allow it in incognito mode.

Now go to the ‘build-css’ task and type in .pipe(plugins.livereload()); after the .pipe(gulp.dest('build')).on('error', gutil.log). The ‘build-css’ task in it’s entirety should look like this…

    gulp.task('build-css', function() {
           return gulp.src('assets/less/*.less')
                .pipe(plugins.plumber())
                .pipe(plugins.less())
                .on('error', function (err) {
                    gutil.log(err);
                    this.emit('end');
                })
                // .pipe(plugins.cssmin())
                .pipe(plugins.autoprefixer(
                    {
                        browsers: [
                            '> 1%',
                            'last 2 versions',
                            'firefox >= 4',
                            'safari 7',
                            'safari 8',
                            'IE 8',
                            'IE 9',
                            'IE 10',
                            'IE 11'
                        ],
                        cascade: false
                    }
                ))
                .pipe(gulp.dest('build')).on('error', gutil.log)
                .pipe(plugins.livereload());
        });

Put plugins.livereload.listen(); at the top line of watch task. It should look like this:

    plugins.livereload.listen();
        gulp.watch('assets/js/libs/**/*.js', ['squish-jquery']);
        gulp.watch('assets/js/*.js', ['build-js']);
        gulp.watch('assets/less/**/*.less', ['build-css']);

Now, run Gulp in the command line and make sure everything is okay. If an error happens, most likely you had a missing or extra semicolon.

Now go ahead and make a change to your LESS file and see as you save the command the Gulp tasks will run, but a new one will appear. It will be the directory of your project and at the end build/style.css reloaded.

Go to your browser and you should see the browser has refreshed on save. If it hasn’t, I cannot stress enough that the black hole needs to be filled for the LiveReload Google Extension, or else it will not work.

Want to be pro status? Add .pipe(plugins.livereload()); after the build (.pipe(gulp.dest('build’))) for your JavaScript in the build-js task so you LiveReload after you save your .js file - it’s only one extra line.

Conclusion

LiveReload can be really powerful when used with Gulp. Remember, do not forget to add plugins. before your LiveReload function call, unless you are not utilizing the gulp-load-plugins plugin. Don’t listen to the other tutorials who say you need to add your port or host in the Gulp file. You do not need any parameters in your livereload.listen(), everything is set up! All in all only a couple lines of extra JavaScript so you do not have to do COMMAND+R anymore.