0

Here is my gulpfile.js:

var gulp = require('gulp'),
  nodemon = require('gulp-nodemon'),
  plumber = require('gulp-plumber'),
  livereload = require('gulp-livereload');

gulp.task('develop', function () {
  livereload.listen();
  nodemon({
    script: 'app.js',
    ext: 'js ejs html coffee'
  }).on('restart',function() {
    console.log('Livereload reload...');
    livereload.reload();
  });  
});

gulp.task('default', [
  'develop'
]);

My app.js:

var express = require('express');

var app = express();

app.set('view engine','ejs');

app.get('/', function(req,res){
   res.send('Hello world!');
});

app.listen(8888, function() {
  console.log('Server started at 8888');
});

When I change 'Hello world!' to 'Hello world!!!!!', I can see the following in my console:

enter image description here

It did logged my changes. But the page is not reloaded at all. I have to refresh my browser to see the change. Anything wrong in my gulpfile.js? Any idea? Thanks.

Khaled Awad
  • 1,644
  • 11
  • 24
Bagusflyer
  • 12,675
  • 21
  • 96
  • 179

2 Answers2

2

I see that the question is pretty old but, anyway, livereload will only work if your browser supports it. For example, for Chrome you need to install an extension called LiveReload. This will enable refreshing the page for you (don't forget to enable it).

Another option is to use BrowserSync. It doesn't actually need anything else besides the plugin (no browser extensions) which you can use in your gulp task. This is an example (taken from here):

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
var BROWSER_SYNC_RELOAD_DELAY = 500;

gulp.task('nodemon', function (cb) {
var called = false;
  return nodemon({
    // nodemon our expressjs server
    script: 'app.js',

    // watch core server file(s) that require server restart on change
    watch: ['app.js']
  })
    .on('start', function onStart() {
      // ensure start only got called once
      if (!called) { cb(); }
      called = true;
    })
    .on('restart', function onRestart() {
      // reload connected browsers after a slight delay
      setTimeout(function reload() {
        browserSync.reload({
          stream: false
        });
      }, BROWSER_SYNC_RELOAD_DELAY);
    });
});

gulp.task('browser-sync', ['nodemon'], function () {

  // for more browser-sync config options: http://www.browsersync.io/docs/options/
  browserSync({

    // informs browser-sync to proxy our expressjs app which would run at the following location
    proxy: 'http://localhost:3000',

    // informs browser-sync to use the following port for the proxied app
    // notice that the default port is 3000, which would clash with our expressjs
    port: 4000,

    // open the proxied app in chrome
    browser: ['google-chrome']
  });
});
Ultimacho
  • 113
  • 1
  • 9
0

Everything is alright with your nodemon installation. You actually have to refresh your browser to see the changes you made.

If you want to have that done for you, check out guard-livereload at this website.

Taragneti
  • 11
  • 3