Gulp 4手表不工作，只运行一次

Question

我从 Gulp 3 更改为 Gulp 4，但我无法让它工作。

当我运行 gulp 并保存 SCSS 或 HTML 文件时，它会成功创建一个新文件。如果我再次保存，则不会发生任何事情。 它只运行那些。

下面是我的 gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

sass.compiler = require('node-sass');


gulp.task('sass', function() {
 return gulp.src('template/assets/scss/**/*.scss')
   .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError))
   .pipe(gulp.dest('template/assets/css/'))
   .pipe(browserSync.stream());
});


// Static Server and watching scss/html files
gulp.task('server', gulp.series('sass', function(){
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
    gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
}));


gulp.task('watch', function() {
    gulp.watch(['sass']);
});


gulp.task('default', gulp.series(gulp.parallel('sass', 'watch', 'server')))

Answer 1

你的'watch'任务是不必要的（而且它的语法是错误的）：

gulp.task('watch', function() {
    gulp.watch(['sass']);
});

所以删除它。您的 'server' 任务中已经有 gulp.watch 语句：

gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
//  gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);

我把上面的第二个注释掉了，因为你已经打电话了

.pipe(browserSync.stream()); 

在'sass' 任务的末尾，所以注释掉的browserSync.reload 行也是重复的。

您还需要在“服务器”任务中发出异步完成信号，请参阅我在哪里添加了 done 回调来执行此操作：

// Static Server and watching scss/html files
gulp.task('server', function (done) {
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.series('sass'));
    //  gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
    done();
});

我从'serve' 任务的开头删除了gulp.series('sass') 调用，因为您已经在默认任务中首先调用了'sass'，因此您在'server' 任务中不需要它。

还要注意在第一个手表中使用gulp.series('sass') 而不是gulp.task('sass')。

最后，由于我们要删除单独的 'watch' 任务，请将“默认”任务更改为：

gulp.task('default', gulp.series('sass', 'server'));

并删除其中的gulp.parallel - 您只是希望'sass' 在'server' 之前运行。

以下是所有更改：

// Static Server and watching scss/html files
gulp.task('server', function (done) {
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.series('sass'));
    // gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
    done();
}));


// gulp.task('watch', function() {
//    gulp.watch(['sass']);
// });

gulp.task('default', gulp.series('sass', 'server'));