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();
});

Answer 2

Why are you visiting ' http://localhost:35729/ ' ? If this is port where livereload is listening then it won't show your site, because as you said your site is available from ' http://localhost:3000 '.

I assume that you have correctly configure gulp. By it I mean that livereload is listening, and you watch changes in your files and in pipes you have '.pipe(livereload()'.

1. You have to install https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
2. you have to run your app ' http://localhost:3000 ' in chrome browser.
3. you will have in browser plugin bar new icon (this is icon of this plugin)
4. you have to click this icon to run this plugin
5. finish

Now when you change something in files, gulp watcher will notice this, do some work, and inform chrome plugin that there are changes, This plugin will refresh your project page.