浏览器同步未刷新gulp watch观察到的文件

在构建过程中，我希望将构建步骤的工件放入

.tmp/service

目录中

我设法设置了

gulpwatch

，以便在修改工作目录中的文件时触发特定任务。当我修改HTML时，它们被构建，工件被粘贴到所需的

.tmp/service

目录中

使用

浏览器同步

从

.tmp/service

重新加载文件时遇到问题。当我在工作目录中多次保存更改时，

浏览器同步

仅刷新以前的更改（1更改延迟）。我猜

reload

函数在

gulpdest

完成之前启动。请注意，如果我手动刷新浏览器，将显示当前的更改

我做错什么了吗

构建htmls任务

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

严厉的任务

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']);
});

您可以使用在生成后重新加载

你的gulpfile会变成这样

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 */

请注意，运行序列需要您的任务返回流或调用回调，否则将导致gulp无限期暂停。请阅读本手册以了解更多信息