如何在多个吞吐流执行时将吞吐任务标记为已完成？ [英] How to mark gulp task as completed when more than one gulp streams are being executed?

问题描述

我需要我的gulp任务是同步的（处理JS和CSS异步，但只有在完成处理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'））; 
}）; 
  

因为我在做 return gulp.src（）... 它返回正在执行的gulp流，它们都是 gulp-run-sequence 和gulp可以知道我的任务在达到最终<$ c $时完成c> .pipe（） ...

但是，如果我有这样的事情：

  gulp.task（'process-css-debug'，function（）{
 gulp.src（'src / ** / app.scss'）$ （'error'，gp.sass.logError））
 .pipe（gp.autoprefixer（））b $ b .pipe（gp.plumber（））
 .pipe（gp.sass ）
 .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'））; 
}）; 
  

因为我现在需要一次运行两个gulp流，所以我不可能做它们都是双重回报，因此任务可以被标记为已完成，直到两者都为止。我现在唯一的解决方案是：

1. 将流分离成2个独立的gulp任务


2. 运行第二个流在第一个流的最后一个 .pipe（）

有没有更优雅的方式来做到这一点？另外，我不能在一个流中处理所有的CSS，因为我需要能够单独重命名每个SASS文件。

解决方案

您可以使用合并流或 event-stream 包。
以下是 merge-stream 的示例：

  var merge = require（'merge -流'）; 
 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 $ （'error'）b $ b .src（'src / ** / app.inline.scss'）
 .pipe（gp.plumber（））
 .pipe（gp.sass（） ，gp.sass.logError））
 .pipe（gp.autoprefixer（））
 .pipe（gp.rename（'app.inline.min.scss'））
 .pipe（ gulp.dest（'./app'））; 
 
返回合并（第一，第二）; 
}）; 
  

I need my gulp tasks to be synchronous (process JS and CSS async, but only after those are completed process HTML since it contains inline JS and CSS), and while plugins like gulp-run-sequence have been immensely useful, I still need to structure my tasks correctly in a way that they can be marked as completed.

Take for example;

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

Because I'm doing the return gulp.src()... which returns the executing gulp stream, both gulp-run-sequence and gulp can know my task is finished when it reaches the final .pipe()...

But what if I have something like this:

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

Because I'm now in need of running two gulp streams at once, I can't possibly do a double return of both of them so the task can be marked as completed until both of them streams are. My only solutions right now are:

1. Separating the streams into 2 separate gulp tasks
2. Running the second stream inside a function that's inside the first streams's last .pipe()

Is there a more elegant way to do this? Also, I can't process all the CSS in one stream because I need to be able to individually rename each SASS file.

解决方案

You can use merge-stream or event-stream packages. Here is example for merge-stream:

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

这篇关于如何在多个吞吐流执行时将吞吐任务标记为已完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！