Combining multiple src streams in gulp?

Question

I'm wondering if there's any way to combine these two separate tasks into one.

This concat-js task requires a generated file to exist prior to running. The task cache-angular-templates generates that file. The generated file needs to be included in the concat output. After concat-js is done, the file can be deleted—it isn't needed anymore.

It seems to be that I should somehow be able to pipe in the stream used in cache-angular-tempaltes into the stream concat-js uses.

gulp.task('concat-js', ['cache-angular-templates'], function () {
    var concatOutputPath = path.dirname(paths.compiledScriptsFile),
        concatOutputFileName = path.basename(paths.compiledScriptsFile),
        jsFiles = [].concat(
            paths.libScripts,
            paths.appScripts,
            paths.templateScriptFile,
            notpath(paths.compiledScriptsFile),
            notpath(paths.specMockScripts),
            notpath(paths.specScripts)
        );

    return gulp
        .src(jsFiles)
        .pipe(buildTools.concat(concatOutputFileName))
        .pipe(gulp.dest(concatOutputPath))
        .on('end', function () {
            del(paths.templateScriptFile);
        })
    ;
});

gulp.task('cache-angular-templates', function () {
    var cacheOutputPath = path.dirname(paths.templateScriptFile),
        cacheOutputFileName = path.basename(paths.templateScriptFile);

    var options = {
        root: '/' + cacheOutputPath,
        standalone: true,
        filename: cacheOutputFileName
    };

    return gulp
        .src(paths.templates)
        .pipe(buildTools.angularTemplatecache(options))
        .pipe(gulp.dest(cacheOutputPath))
    ;
});

Hystero

Answer 1

Indeed you should merge them, as one of the ideas of Gulp is to eliminate intermediary-temporary files.

One of the ways to achieve it is by:

1. converting cache-angular-templates to a function that returns the templating stream, let's call it getTemplateStream;
2. removing the .pipe(gulp.dest(cacheOutputPath)) from it;
3. using event-stream to merge the streams prior to concatenating it on the main task. Your main task would become something like this:

var es = require('event-stream');

gulp.task('concat-js', function () {
    var concatOutputPath = path.dirname(paths.compiledScriptsFile),
        concatOutputFileName = path.basename(paths.compiledScriptsFile),
        jsFiles = [].concat(
            paths.libScripts,
            paths.appScripts,
            notpath(paths.compiledScriptsFile),
            notpath(paths.specMockScripts),
            notpath(paths.specScripts)
        );

    return es.merge(gulp.src(jsFiles), getTemplateStream())
        .pipe(buildTools.concat(concatOutputFileName))
        .pipe(gulp.dest(concatOutputPath));
});

function getTemplateStream() {
    var options = {
        root: '/' + cacheOutputPath,
        standalone: true,
        filename: cacheOutputFileName
    };

    return gulp
        .src(paths.templates)
        .pipe(buildTools.angularTemplatecache(options));
}

By doing this, you're merging the two streams, and the output file of your getTemplateStream will be sent down the pipe.

Embryology

Awesome! Thank you SO MUCH! This is exactly what I was looking for. I'm glad you didn't get into whether I should do what I was doing; I just wanted to know how to have the pattern to apply when I need it. Thanks again! – Hystero

+1 I dont normally comment on solutions that work for me, but I've spent the last six hours googling and reading docs to figure out how to merge multiple gulp.src calls together and this is the only thing I've found to work. Outstanding answer! – Farwell

Same as above. It's confusing that event-stream merges, and merge-stream package does something subtly but significantly different. Thanks for documenting! – Berkeleianism