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

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.