时间戳

首页 > 解决方案 > Gulp 4 手表 gulp.series 只运行一次

gulp - Gulp 4 手表 gulp.series 只运行一次

问题描述

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

标签： gulpgulp-watch

解决方案

如果您不想返回 gulp 实例。您可以按照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();
});

推荐阅读