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

问题

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:

Separating the streams into 2 separate gulp tasks
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.

回答1:

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

来源：https://stackoverflow.com/questions/38086033/how-to-mark-gulp-task-as-completed-when-more-than-one-gulp-streams-are-being-exe

标签

javascript

gulp