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

将.pipe(connect.reload()) 放在每个任务的末尾，例如 js：

return gulp.src([
    ...
    ])
    .pipe(concat({ path: 'js.js'}))
    .pipe(uglify())
    .pipe(gulp.dest('./public/js'))
    .pipe(connect.reload());

因为现在当它在手表上时watch([...]).pipe(connect.reload()); 它会在编译开始但不一定完成时触发。

Answer 2

除了@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 包用法避免这个问题。

Answer 3

我最近遇到了同样的问题，这里提到的两种解决方案都不起作用，正如我在我的 cmets 中指出的那样。

使用 Gulp 3，我能想到的唯一可行的解​​决方案如下（虽然我没有使用 gulp-connect，但实际的解决方案应该是通用的）：

gulp.task('jade', function() {
    var stream = 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/'))
        .on('end', function() {
            livereload.reload();
        });
});

...

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

我不知道 Gulp 内部是如何工作的，但on('end'...)似乎实际上是等到流的所有操作都完成了。

使用 Gulp 4 可能会有一个看起来很像@Konstantin Azizov 的解决方案。

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

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

或者甚至只是：

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

请注意，我没有测试 Gulp 4 解决方案。我有点不愿意切换到版本 4，因为它还没有正式发布。不过还是很诱人的。