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

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

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

我gulp.series('sass')从任务开头删除了该调用，'serve'因为您已经'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'));