4

I'm configuring my gulp.js gulpfile to watch my directory for file changes, and 1) reload my express server and 2) issue a livereload "change" event so that my browser (with the LiveReload chrome extension) will reload the page that I'm developing.

Here's my gulpfile:

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

gulp.task('startReloadServer', function() {
  livereload.listen();
});

gulp.task('demon', function () {
  nodemon({
    script: 'server.js',
    ext: 'js html',
    env: {
      'NODE_ENV': 'development'
    }
  })
    .on('start', ['startReloadServer'])
    .on('restart', function () {
      console.log('restarted!');
      livereload.changed();
    });
});

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

Yet when I make a change to one of my view (.html) files, my browser reloads the page before the node server process has had an opportunity to come back online:

failed browser request

How do I alter my gulpfile to have the livereload.changed() event be issued after nodemon is ready to receive requests?

maxm
  • 5,161
  • 7
  • 30
  • 33

2 Answers2

4

I found similar question, then I write my solution.
Gulp to watch when node app.listen() is invoked or to port (livereload, nodejs and gulp)

nodemon({script: 'app.js',
         nodeArgs: ['--harmony'],
         stdout: false})
    .on('readable', function(data) {
        this.stdout.on('data', function(chunk) {
            if (/koa server listening/.test(chunk)) {
                console.log('livereload');
                livereload.reload();
            }
            process.stdout.write(chunk);
        });
        this.stderr.pipe(process.stderr);
    });
Community
  • 1
  • 1
Daishi Nakajima
  • 1,932
  • 18
  • 26
2

I also ran into this problem. This best I could come up with was to delay the call to livereload.changed() for one second.

nodemon.on('restart', function() {
  setTimeout(livereload.changed, 1000);
});

docs: setTimeout

aar0n
  • 1,546
  • 1
  • 10
  • 10