gulp.js - How do I return multiple streams back to main stream?

Question

I want to start a gulp.src stream, pipe that to a function that creates a bunch of new streams and then pipe the result of those to gulp.dest. Below is what I have so far but it's obviously not working since I'm piping the streams back to gulp.dest which blows up because it's expecting a file, not a stream. So my question is: how do I properly return n number of streams back to gulp's original stream so they can continue down the pipe appropriately?

//gulpfile.js
var gulp = require('gulp'),
  bundle = require('./lib/bundle.js');

gulp.task('bundle', function() {
  return gulp.src('./bundle.config.js')
    .pipe(bundle())
    .pipe(gulp.dest('./public'));
});

-

//bundle.config.js
module.exports = {
  bundle: {
    main: {
      js: [
        './content/js/foo.js',
        './content/js/baz.js'
      ],
      css: [
        './content/**/*.css'
      ],
      resources: './content/**/*.{png,svg}'
    },
    other: {
      js: './content/js/other.js',
      css: '',
      resources: ''
    }
  }
};

-

//bundle.js
var gulp = require('gulp'),
  through = require('through2'),
  concat = require('gulp-concat');

module.exports = function () {
  return through.obj(function (file, enc, cb) {
    var config;
    try {
      config = require(file.path); // get config file
    } catch (e) {
      this.emit('error', e);
      return cb();
    }
    var streams = [];
    for (var key in config.bundle) {
      var bundle = config.bundle[key];

      streams.push(
        gulp.src(bundle.js, {base: '.'})
          .pipe(concat(key + '.js'))
      );

      streams.push(
        gulp.src(bundle.css, {base: '.'})
          .pipe(concat(key + '.css'))
      );

      streams.push(
        gulp.src(bundle.resources, {base: '.'})
        //.pipe(something())
      );

    }
    for (var i = 0; i < streams.length; i++) {
      // This causes an error in `gulp.dest` because we're returning the stream, not the file.
      // Instead, how do I resolve each of the individual streams and push the results back to the main stream??
      this.push(streams[i]);
    }
    cb();
  });
};

You can see this example code which you can fork and play with at this repo: https://github.com/chmontgomery/gulp-streams-to-stream

Answer 1

You can concatenate streams with merge-stream

var gulp = require('gulp');
var merge = require('merge-stream');

gulp.task('bundle', function () {

  var paths = [
    { src: 'src/admin/**', dest: './build/admin' },
    { src: 'src/public/**', dest: './build' }
  ];

  var tasks = paths.map(function (path) {
    return gulp.src(path.src).pipe(gulp.dest(path.dest));
  }

  return merge(tasks);
};

Answer 2

Wait with your gulp.dest until after you have merged the streams.

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

gulp.task('bundle', function(cb) {
      //Sorry, forgot the bundling
      var paths = [{
        path: 'src/admin/**',
        filename: 'one.file'
      }, {
        path: 'src/public/**',
        filename: 'two.file'
      }];

      var tasks = paths.map(function(path) {
          return gulp.src(path.path)
          .pipe(concat(path.filename));
        }

        es.merge.apply(null, tasks)
        .pipe(gulp.dest('./dist/dest'))
        .on('end', cb);
      });