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.

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?