当执行多个吞咽流时，如何将吞咽任务标记为已完成

How to mark gulp task as completed when more than one gulp streams are being executed?

本文关键字：任务 已完成 记为 执行      更新时间：2023-09-26

我需要我的gump任务是同步的(处理JS和CSS async，但只有在它们完成之后才处理HTML，因为它包含内联JS和CSS(，虽然像gulp-run-sequence这样的插件非常有用，但我仍然需要以一种可以标记为已完成的方式正确地构建我的任务。

举个例子；

gulp.task('process-css', function() {
    return gulp.src(['src/app.scss'])
        .pipe(gp.plumber())
        .pipe(gp.sass().on('error', gp.sass.logError))
        .pipe(gp.autoprefixer())
        .pipe(gp.cleanCSS())
        .pipe(gp.rename('app.min.scss'))
        .pipe(gulp.dest('./app'));
});

因为我正在执行返回执行中的gump流的return gulp.src()...，所以当任务到达最终的.pipe()时，gulp-run-sequence和gump都可以知道我的任务已经完成。。。

但如果我有这样的东西呢：

gulp.task('process-css-debug', function() {
    gulp.src('src/**/app.scss')
        .pipe(gp.plumber())
        .pipe(gp.sass().on('error', gp.sass.logError))
        .pipe(gp.autoprefixer())
        .pipe(gp.rename('app.min.scss'))
        .pipe(gulp.dest('./app'));
    return gulp.src('src/**/app.inline.scss')
        .pipe(gp.plumber())
        .pipe(gp.sass().on('error', gp.sass.logError))
        .pipe(gp.autoprefixer())
        .pipe(gp.rename('app.inline.min.scss'))
        .pipe(gulp.dest('./app'));
});

因为我现在需要同时运行两个吞咽流，所以我不可能对这两个流都进行双重返回，因此任务可以标记为已完成，直到这两个流都完成为止。我现在唯一的解决方案是：

  1. 将流分成两个单独的吞咽任务
  2. 在第一个流的最后一个.pipe()内的函数内运行第二个流

有更优雅的方法吗？此外，我不能在一个流中处理所有的CSS，因为我需要能够单独重命名每个SASS文件。

您可以使用合并流或事件流包。以下是合并流的示例：

var merge = require('merge-stream');
gulp.task('process-css-debug', function() {
     var first = gulp
        .src('src/**/app.scss')
        .pipe(gp.plumber())
        .pipe(gp.sass().on('error', gp.sass.logError))
        .pipe(gp.autoprefixer())
        .pipe(gp.rename('app.min.scss'))
        .pipe(gulp.dest('./app'));
     var second = gulp
        .src('src/**/app.inline.scss')
        .pipe(gp.plumber())
        .pipe(gp.sass().on('error', gp.sass.logError))
        .pipe(gp.autoprefixer())
        .pipe(gp.rename('app.inline.min.scss'))
        .pipe(gulp.dest('./app'));
     return merge(first, second);
});
相关文章：