#Node #Build #Gulp #LiveReload

This tutorial will show you how to automatically refresh your webpage whenever a modification is made to your source code.

We will learn how to install and configure the following tools:

  • gulp-connect: to start a webserver from our Gulp build script
  • gulp-open: to open an URL in our web browser

To get started we will need a basic website project with a gulpfile.js that can generate our website. Check out my Getting started with Gulp and or this gulpfile example

1) Starting a webserver with gulp-connect

First install gulp-connect locally with npm install --save-dev gulp-connect,

and add the dependency to the gulpfile.js with var connect = require('gulp-connect');

We are now ready to declare our connect task. (Check out this tutorial if you don’t know what a gulp task is)

gulp.task('connect', function () {
    connect.server({
        root: 'dist',
        port: 8001,
        livereload: true
    });
});

This will create a webserver running on http://localhost:8001 which uses our dist directory as the website root. For more configuration options, check out the documentation.

Add the connect task to the default task:

gulp.task('default', ['html', 'css', 'connect']);

and run your gulp build to test it out.

2) Opening a web browser with gulp-open

Install gulp-open locally with npm install --save-dev gulp-open

and add the dependency to the gulpfile.js with var open = require('gulp-open');

Declare the ‘open’ task:

gulp.task('open', function(){
    gulp.src('dist/index.html')
        .pipe(open({uri: 'http://localhost:8001/'}));
});

and add it to the default task

gulp.task('default', ['html', 'css', 'connect', 'open']);

run your gulp and your browser will open automatically, pointing to your local webserver URL.

3) Refreshing the page automatically when a code change is detected

Wrapping up, we are going to configure gulp to automatically refresh the website every time a change is made to the code. That way, we won’t have to start our gulp build and hit the refresh button manually each time.

a) Watch task

First of all, we need a watch task that will watch the filesystem and rebuild the project when a change is detected.

gulp.task('watch', function () {
    gulp.watch('./src/*.html', ['html']);
    gulp.watch('./src/**/*.css', ['css']);
});

This task will start two gulp file watchers which will execute the ‘html’ and ‘css’ tasks whenever a change is detected.

b) Build task modification

Since we want our webpage to be refreshed automatically, we need to ask gulp-connect to reload the site whenever a new build is ready. This means adding a new piped instruction to both our ‘html’ and ‘css’ tasks that will reload the site.

Our ‘html’ task:

gulp.task('html', function() {
    gulp.src('./src/*.html')
        .pipe(gulp.dest('./dist'));
});

becomes:

gulp.task('html', function() {
    gulp.src('./src/*.html')
        .pipe(gulp.dest('./dist'))
        .pipe(connect.reload());
});

A piped connect.reload() should also be added to the ‘css’ task and any other build task that is present in your project.

c) Default task modification

Don’t forget to modify the default gulp task to start the file watchers:

gulp.task('default', ['html', 'css', 'connect', 'open', 'watch']);

Now start your gulp and that’s it, if you modify (and save) one of your html or css file, the website will be automatically updated. Happy coding!

You can check an example of a refactored gulpfile.js for this project here.

#Node #Build #Gulp #LiveReload