Why doesn't live reload work with gulp-connect?

Question

I use gulp-connect like this:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);

  gulp.watch(distPaths, function() {
    return gulp.src(distPaths)
               .pipe(connect.reload());
  });
});

The live reload bit works fine.

My question is, why the following doesn't work:

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);
  gulp.watch(distPaths, connect.reload);
});

What the gulp.src(distPaths) bit is for?

Also, what's the importance of return?

score 22 · Accepted Answer · edited Aug 02 '15 at 22:27

connect.reload() needs to be used in a stream. In your example, you're trying to call it as a standalone function, which does nothing. Calling connect.reload() returns a stream handler that takes input and does something with it. It's effectively a no-op in the second example.
You need return or tasks are run synchronously. (You can also return a promise or use the callback function.)

Basically, if you don't provide some way for gulp to track the progress of your asynchronous tasks, it has to assume they are complete when you return from the function. If you return the pipe, it can listen to for it to reach the end.

Also, it might work better to use gulp-watch for your watch, because it only passes through the changed files, which is what you want for live reload:

var watch = require('gulp-watch');

gulp.task('watch', function() {
    gulp.watch(paths.scss, ['scss']);
    watch(distPath).pipe(connect.reload());
});

score 3 · Answer 2 · answered Sep 25 '14 at 17:04

It took me also a while to figure out how I connect the reload function with my setup. My watch task includes more than one folder as I am not always running a full build task while I am developing. Some files are loaded from a .tmp folder, based on the Yeoman gulp-webapp generator. I am not sure if this is the fastest way but i solved it like this:

 gulp.watch([
    '.tmp/*.html',
    '.tmp/styles/**/*.css',
    'app/js/**/*.js',
    'app/images/**/*'
]).on('change', function (file) {
    gulp.src( file.path)
        .pipe( $.connect.reload() );
});

Hope that helps someone as well.

This wont wait after tasks are completed but only listen to the change event... It will work if the watched items are the generated ones ! ;-) — Monkey Monk, Aug 28 '15 at 09:51

score 2 · Answer 3 · answered Feb 24 '15 at 16:37

I don't fully understand why (@overzealous makes good points), but I found that my less files were being refreshed consistently 'a version behind', similar to this issue posted to generator-gulp-webapp: Livereload seems to be a save behind on loading changes #77

Since version 0.3.0 generator-gulp-webapp uses browsersync instead of connect/livereload, and updating my gulpfile to match solved all my issues!

HTH

Why doesn't live reload work with gulp-connect?

3 Answers3