Gulp 保存 sass/js/html 文件时监视任务不工作

Question

当 scss、HTML 和 js 文件更改时，我试图重新加载浏览器，但是当我运行 gulp watch 命令时，它没有重新加载浏览器或看不到任何 css/js/html 变化。

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

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

gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

Answer 1

您需要进行如下所示的一些更改：

gulp.task('browserSync', function(done) {         // done added here
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  });
  done();                                          // done() called here
})

// gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.task('watch', gulp.series('browserSync', 'sass', function () {       // see note below
  
    gulp.watch('app/scss/**/*.scss', gulp.series('sass'));

    // gulp.watch('app/*.html', browserSync.reload);

    gulp.watch("app/*.html", { events: 'all' }, function(cb) {
      browserSync.reload();
      cb();
    });

    gulp.watch('app/js/**/*.js', browserSync.reload);
}));                                                                       // added a )

gulp.watch() 接受 2 个参数，而不是 3 个。gulp.series() 应该包括所有函数 - 包括包含 watch 调用的匿名函数。并丢失数组括号。

Answer 2

关于Mark's solution，如果您想查看实时重载，只需在所需手表的末尾添加.on('change', browserSync.relod)：

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

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

gulp.task('watch', gulp.series('browserSync', 'sass', function () {
  gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
  gulp.watch('app/scss/**/*.scss').on('change', browserSync.reload);
  gulp.watch('app/*.html').on('change', browserSync.reload);
  gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
}));

Gulp 保存 sass/js/html 文件时监视任务不工作

Gulp watch task is not working when sass/js/html file is saved

javascript

sass

gulp