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 行也是重复的。

你也需要在你的 'server' 任务中发出异步完成信号，看看我在哪里添加了 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' 任务，因此将 'default' 任务更改为：

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

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

Gulp 4 watch not working, only run one time

gulp

gulp-watch

gulp-browser-sync

gulp-4

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

Gulp 4 watch not working, only run one time

gulp

gulp-watch

gulp-browser-sync

gulp-4

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