Gulp 4 watch gulp.series 只运行一次

Question

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

当我运行 gulp 并保存 js 或 scss 文件时，它会成功创建一个新文件。如果我再次保存，则不会发生任何事情。我的猜测是我不明白 gulp.series 是如何工作的。它只运行一个。

var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var gutil = require('gulp-util');
var minifyJS = require('gulp-minify');

gulp.task('css', function() {
    gulp.src([
        'assets/css/src/tinyFileTree.scss'
    ])
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'))
    .pipe(rename('tinyFileTree.min.scss'))
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'))
});

// JS
gulp.task('js', function() {
  gulp.src([
    'assets/js/src/tinyFileTree.js'
    ])
    .pipe(minifyJS({
      ext:{
        min:'.min.js'
      },
    }))
    .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
    .pipe(gulp.dest('assets/js/dist'))
});

// Default
gulp.task('default', function() {
    gulp.watch('assets/css/src/tinyFileTree.scss', gulp.series('css'));
    gulp.watch('assets/js/src/tinyFileTree.js', gulp.series('js'));
});

Answer 1

如果你不想返回一个 gulp 实例。关注signature即可在 gulp watch 文档中使用。该函数需要一个带有一个参数的回调函数，您需要在任务结束时执行该参数。我花了几个小时才弄清楚这个问题，但就在这里。

注意 cb();

gulp.task('css', function(cb) {
    gulp.src([
        'assets/css/src/tinyFileTree.scss'
    ])
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'))
    .pipe(rename('tinyFileTree.min.scss'))
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'));

    cb();
});