浏览器同步不会刷新gulp-watch观察到的文件

Question

In my build process I want to put the artifacts of the build steps into .tmp/serve directory.

I managed to set up gulp-watch to fire specific tasks when I modify files in my working directory. Eq when I modify htmls, they are built and the artifacts are pasted into desired .tmp/serve directory

I'm having problems with reloading the files from .tmp/serve with browser-sync . When I save changes in my working directory multiple times, browser-sync refreshes only the previous changes ( 1 change delay ). I guess the reload function fires before gulp-dest finishes. Note that if I refresh browser manually the current changes appear.

Am I doing something wrong?

Build htmls task

gulp.task('html', ['styles'], () => {
  return gulp.src('app/*.html')
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
    .pipe(gulp.dest('.tmp/serve'))
    ;
});

Sever task

const reload = browserSync.reload;

gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'], () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp/serve'],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

  /***********  SEE THE LINES BELOW  **************/
  gulp.watch([
    '.tmp/serve/**/*',
  ]).on('change', reload);

  gulp.watch('app/styles/**/*.scss', ['styles']);
  gulp.watch('app/fonts/**/*', ['fonts']);
  gulp.watch('app/*.html', ['html']);
  gulp.watch('app/scripts/**/*', ['build:scripts']);
  gulp.watch('bower.json', ['wiredep', 'fonts']);
});

Answer 1

You can use run-sequence to reload after a build.

Your gulpfile would become like this..

var gulp = require('gulp'),
    runSeq = require('run-sequence')
    ...
    ;

gulp.task('build', ['styles', 'fonts', 'build:scripts', 'html', 'images']);

gulp.task('serve', ['build', 'watch'], () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp/serve'],
      routes: {
        '/bower_components': 'bower_components'
      }
    }
  });

gulp.task('reload', function (callback) {
   browserSync.reload();
   callback();
});

gulp.task('watch', ['watch-styles', ...]);

gulp.task('watch-styles', function () {
   gulp.watch('app/styles/**/*.scss', function () {
      runSeq('styles', 'reload');
   });
});

/* And so on for every watch task */

Note that run-sequence needs your tasks to either return a stream or to call a callback, otherwise it will cause gulp to pause indefinitely. Read the Doc to learn more.