Unable to get connect-livereload to work with express server in gulp task

Question

I am working off of Yeoman's gulp-webapp generator. I have modified my gulp serve task to use my Express server, rather than the default connect server it ships with. My issue is with Livereload functionality. I am trying to simply port the connect-livereload to work with my Express server rather than having to install new dependencies. It's to my understanding that most connect middleware should work fine with Express, so I am assuming connect livereload is compatible with Express 4.

Here are the contents of the relevant tasks in my gulpfile:

gulp.task('express', function() {
  var serveStatic = require('serve-static');
  var app = require('./server/app');
  app.use(require('connect-livereload')({port: 35729}))
    .use(serveStatic('.tmp'));

  app.listen(3000);
});

gulp.task('watch', ['express'], function () {
  $.livereload.listen();

  // watch for changes
  gulp.watch([
    'app/*.ejs',
    '.tmp/styles/**/*.css',
    'app/scripts/**/*.js',
    'app/images/**/*'
  ]).on('change', $.livereload.changed);

  gulp.watch('app/styles/**/*.css', ['styles']);
  gulp.watch('bower.json', ['wiredep']);
});

gulp.task('styles', function () {
  return gulp.src('app/styles/main.css')
    .pipe($.autoprefixer({browsers: ['last 1 version']}))
    .pipe(gulp.dest('.tmp/styles'));
});

gulp.task('serve', ['express', 'watch'], function () {
  require('opn')('http://localhost:3000');
});

With this simple setup, when I run gulp serve in my cmd everything spins up fine and I can accept requests at http://localhost:3000.

Now if I go and change the body's background color from #fafafa to #f00 in main.css and hit save, my gulp output will respond with main.css was reloaded, as seen in the bottom of this screenshot.

CMD

However, my webpage does not update. The background color is still light-grey instead of red.

Is there perhaps a conflict between my express server config and the way gulp handles its files? Is my Express server forcing the use of app/styles/main.css rather than the use of .tmp/styles/main.css? Shouldn't the livereload script handle the injection of the new temporary file?

Thanks for any help.

EDIT:

I was able to move forward a bit by adding livereload.js to the script block of my index file, like so:

<script src="http://localhost:35729/livereload.js"></script>

I am now able to get live changes pushed to the client. Why was this file not getting injected before? How can I ensure this is getting used programatically as opposed to pasting it into my files?

robabby · Answer 1 · 2015-01-22T15:09:36.273

I was able to get past this issue by removing the app.use(require('connect-livereload')({port: 35729})) from my gulpfile, along with a couple of other lines, and having that instantiate in my Express server's app.js file.

My gulpfile's express task now looks like this:

gulp.task('express', function() {
  var app = require('./server/app');
  app.listen(3000);
});

I added in the connect-livereload just above where I specify my static directory in Express:

if (app.get('env') === 'development') {
  app.use(require('connect-livereload')());
}

app.use(express.static(path.join(__dirname, '../app')));

Once I started using this setup, I was getting the livereload.js script injected into my document, and client-side changes are now auto-refreshed just how I wanted.

Hope this helps someone!

Unable to get connect-livereload to work with express server in gulp task

1 Answers1