node.js - 完成前浏览器同步与刷新

Question

我在 gulp 中进行 browsersync，设置如下。问题是，当代码更改时，browsersync 会识别并刷新页面。不过，它不会等待脚本文件进入gulp.dest，所以一般会自动刷新，找不到脚本文件，然后再次刷新，它就在那里。

有没有办法确保它会等待任务完全完成？

var browserSync = require('browser-sync').create();

gulp.task('cleanScripts', function () {
  return gulp.src('./assets/js', {read: false})
             .pipe(clean());
});

gulp.task('scripts', ['cleanScripts'], function() {
    return browserify('./client/js/main.js')
      .bundle()
      .on('error', function (e) {
          gutil.log(e);
      })
      .pipe(source('main-' + packageJson.version + '.js'))
      .pipe(buffer())
      .pipe(uglify())
      .pipe(gulp.dest('./assets/js'));
});

//Watch our changes
gulp.task('watch', function () {
   browserSync.init({
     proxy: "localhost:3000"
  });
  gulp.watch(['./client/js/**/*.js', ['scripts']).on('change', browserSync.reload);
});

Answer 1

BrowserSync 有选项 reloadDelay可以在 gulpfile.js 中设置

Time, in milliseconds, to wait before instructing the browser to reload/inject following a file change event

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: 'app'
        },
        reloadDelay: 100
    });
});