保存sass/js/html文件时，gulp watch任务不起作用 [英] Gulp watch task is not working when sass/js/html file is saved

问题描述

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

I am trying to reload the browser when scss, HTML and js file is changed but when I run the gulp watch command it's not reloading the browser or can't see any css/js/html changes.

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);
});

推荐答案

您需要进行如下所示的更改:

You need to make a couple of changes shown here:

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调用的匿名函数.并失去了阵列括号.

gulp.watch() takes 2 arguments, not 3. gulp.series() should include all the functions - including your anonymous function that contains the watch calls. And lose the array brackets.

这篇关于保存sass/js/html文件时，gulp watch任务不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！