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

【问题标题】：Browser-sync is not refreshing files observed by gulp-watch浏览器同步不刷新 gulp-watch 观察到的文件
【发布时间】：2015-12-05 00:30:51
【问题描述】：

在我的构建过程中，我想将构建步骤的工件放入.tmp/serve 目录。

当我修改工作目录中的文件时，我设法设置gulp-watch 来触发特定任务。方程当我修改 html 时，它们会被构建并将工件粘贴到所需的 .tmp/serve 目录中

我在使用browser-sync 从.tmp/serve 重新加载文件时遇到问题。当我在工作目录中多次保存更改时，browser-sync 仅刷新以前的更改（1 更改延迟）。我猜reload 函数会在gulp-dest 完成之前触发。请注意，如果我手动刷新浏览器，则会出现 current 更改。

我是不是做错了什么？

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

【问题讨论】：

标签： gulp watch gulp-watch browser-sync

【解决方案1】：

您可以在构建后使用run-sequence 重新加载。

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

注意，run-sequence 需要你的任务要么返回一个流，要么调用一个回调，否则会导致 gulp 无限期地暂停。阅读Doc 了解更多信息。

【讨论】：