javascript - gulp-watch 和 LiveReload，重新加载太早

Question

我已经设置了 gulp-watch 和 LiveReload。它以某种方式起作用，但大多数时候都是错误的。感觉 LiveReload 发出重新加载事件的速度比浏览器重新加载文件的速度更快。我可以这样解释:

1. 我的 src 目录中的某些文件已更改
2. 开始编译
3. 当仍在编译时，浏览器会重新加载页面
4. 有时页面已经是新的且正确的。大多数时候它都是旧的。有时它只是页面的一部分。
5. 点击重新加载，一切正常。

我认为在集成 gulp-watch 和 LiveReload 时我犯了一些错误。你能帮我找一个吗？

这是我的 gulpfile.js:

var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var connect = require('gulp-connect');
var favicons = require('gulp-favicons');
var ga = require('gulp-ga');
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var responsive = require('gulp-responsive');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var print = require('gulp-print');

gulp.task('default', ['jade', 'sass', 'js', 'connect', 'watch']);

gulp.task('jade', function() {
  gulp.src('./src/jade/*.jade')
    .pipe(jade())
    .pipe(ga({url: 'auto', uid: config.gaId, tag: 'body',sendPageView: true, minify: false, anonymizeIp: false}))
    .pipe(gulp.dest('./public/'));
});

gulp.task('sass', function () {
  gulp.src('./src/sass/style.scss')
    .pipe(sass({
      includePaths: [
        config.bowerDir + '/bootstrap/scss',
        config.bowerDir + '/font-awesome/scss'
      ],
      outputStyle: 'compressed'
    })
    .on('error', sass.logError))
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(gulp.dest('./public/css'));
});

gulp.task('connect', function() {
  connect.server({
    root: 'public',
    livereload: true
  });
});

gulp.task('watch', function () {
  gulp.watch(['./src/jade/**/*.jade'], ['jade']);
  gulp.watch(['./src/sass/**/*.scss'], ['sass']);
  gulp.watch(['./src/js/**/*.js'], ['js']);
  watch(['./public/**/*.html', './public/**/*.css', './public/**/*.js']).pipe(connect.reload());
});

gulp.task('js', function () {
  return gulp.src([
    './node_modules/fontfaceobserver/fontfaceobserver.js',
    './bower_components/jquery/dist/jquery.min.js',
    './bower_components/bootstrap/js/dist/util.js',
    './bower_components/bootstrap/js/dist/collapse.js',
    './bower_components/picturefill/dist/picturefill.js',
    './src/js/modernizr.js',
    './src/js/js.js'
    ])
    .pipe(concat({ path: 'js.js'}))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js'));
});

完整源代码在这里https://gist.github.com/dandaka/3e342158763f9ccbd23305eecfd0b69c

谢谢!

Answer 1

此外，除了 @TheFallen 的建议之外，您的良好做法是创建一个单独的任务并将其放置在监视任务的末尾。

var gulp = require('gulp');
var runSequence = require('run-sequence');

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

gulp.task('watch', function () {
  gulp.watch(['./src/jade/**/*.jade'], function() {
    runSequence('jade', 'reload');
  })

  gulp.watch(['./src/sass/**/*.scss'], function() {
    runSequence('sass', 'reload');
  });

  gulp.watch(['./src/js/**/*.js'], function() {
    runSequence('js', 'reload');
  });
});

UPD:正如@Fencer正确指出的那样，任务是同时执行的，这有时可能会导致在上一个任务完成之前重新加载页面的情况，我添加了 run-sequence使用包来避免这个问题。