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?

Answer 1

1. 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.

2. 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());
});

Answer 2

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.

Answer 3

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