Tutorial

A Quick Guide to Using LiveReload with Gulp

Draft updated on Invalid Date
Default avatar

By Kenny Song

A Quick Guide to Using LiveReload with Gulp

This tutorial is out of date and no longer maintained.

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:

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:

  1. 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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Kenny Song

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel