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

score 14 · Accepted Answer · edited Dec 26 '15 at 16:38

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:

converting cache-angular-templates to a function that returns the templating stream, let's call it getTemplateStream;
removing the .pipe(gulp.dest(cacheOutputPath)) from it;
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.

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! — core, Feb 01 '15 at 18:30
+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! — Martin Bliss, Oct 25 '15 at 06:38
Same as above. It's confusing that event-stream merges, and merge-stream package does something subtly but significantly different. Thanks for documenting! — RobW, Dec 07 '15 at 20:10

Combining multiple src streams in gulp?

1 Answers1