Question

我已经设置了gulp-watch和LiveReload。它以某种方式工作，但大部分时间都是错误的。感觉LiveReload比浏览器重新加载文件更快地发出重载事件。我可以这样解释：

我的src目录中的某些文件已更改
开始编译
在进行编译时，浏览器会重新加载页面
有时页面已经是新的和正确的。大部分时间都是旧的。有时它只是页面的一部分。
点击重装，一切都很好。

我认为我在整合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正确指出的那样，任务同时执行，这有时会导致在上一个任务完成之前重新加载页面的情况，我已添加{{3用于避免此问题的包用法。

Answer 2

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

使用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，因为它还没有正式发布。然而，它非常诱人。

Answer 3

将.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());上时，它会在编译开始时触发，但不一定完成。

gulp-watch和LiveReload，过早重装

3 个答案: