I am trying to get gulp-livereload
to work with my nodejs server. I am using gulp-nodemon
to restart the server after changes to the files, this works. I am having trouble invoking livereload.reload()
at the correct time.
I am currently invoking livereload.reload()
on the .on('start'...
in my gulpfile.js
(whenever my nodemon starts a script). This works but it takes a few seconds. The reason is when nodemon starts to run the nodejs script it invokes livereload.listen()
before the script has invoked app.listen(port)
, so my browser refreshs without the server being ready.
Is there a way to listen if the nodejs nodemon script has invoked app.listen(port)
or perhaps listen to see if a specific port is being used?
I have fixed the issue with a small sleep but it just feels so wrong and dirty.
Use readable event to monitor stdout of child process.
example:
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);
});
app.js
app.listen(3000, function(err) {
console.log('koa server listening');
});
Here is a an example of simple and tested livereload solution based on connect
server and connect-livereload
and gulp-livereload
plugins if that is of any help:
var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');
var config = {
rootDir: __dirname,
servingPort: 8080,
// the files you want to watch for changes for live reload
filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}
// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);
gulp.task('watch', ['connect'], function () {
gulpLivereload.listen();
gulp.watch(config.filesToWatch, function(file) {
gulp.src(file.path)
.pipe(gulpLivereload());
});
});
gulp.task('serve', ['connect'], function () {
return opn('http://localhost:' + config.servingPort);
});
gulp.task('connect', function(){
return connect()
.use(connectLivereload())
.use(connect.static(config.rootDir))
.listen(config.servingPort);
});