Gulp with live-reload

Question

I have a website that I've built with Node. I can successfully start and run the site by running node server.js from the command-line. I then access the site by visiting "http://localhost:3000" in my browser. I'm now trying to improve some of the build process surrounding the site. To do that, I'm relying on Gulp.

I want to automatically reload the webpage when a change is made to the HTML or CSS files. I stumbled upon the gulp-livereload plugin. I have installed it as described in the docs. However, when I visit "http://localhost:35729/" in the browser, I just see the following:

{
  minilr: "Welcome",
  version: "0.1.8"
}

My gulp task is configured like this:

gulp.task('launch',  function() {
    var toWatch = [
        'src/**/*.html',
        'src/**/*.css'
    ];

    livereload.listen();
    gulp.watch(toWatch, function() {
        console.log('reloading...');
        livereload();
    })
}

I do not see my home page like I do when I visit "http://localhost:3000" after running node server.js. What am I missing?

Answer 1

Live reload is a protocol to send notifications to the browser to do a reload. But you need a browser plugin to listen and do the reload, although it is possible to forgo the plugin using a script tag.

The gulp-livereload plugin only concerns itself with the implementation of the livereload server, you still need to serve the files via a http server from gulp.

You can use a gulp module that does both gulp-connect.

However unless you are tied to livereload for some reason, I suggest using browserync. Browsersync is a nice alternative to livereload that aditionally adds the capacity of syncing your view between browsers. Since it injects a script tag into your html and listens on a socket you don't need any plugins to make it work. It works even on Mobile devices.

A gulp task to use browsersync might look like this. Don't forget to add browsersync to your package.json file

var browserSync = require('browser-sync').create();

gulp.task('serve',  [] , function( cb ){

    browserSync.init({
        open:  true ,
        server: {
            baseDir: "src"
        }
    });

    gulp.watch([
      'src/**/*' ,
    ] , ['serve:reload'] );

});

gulp.task('serve:reload' , []  , function(){
  browserSync.reload();
});