Gulp concatening multiple actions

问题

I get the following error when i run this

gulp.task('gen:enemies', function () {
  /**
   *  Hold all directories names starting with "enemy"
   */
  var EnemyDirs = fs.readdirSync(path.join('images')).filter(function (p) {
      if (p.match(/^enemy/)) {
        return fs.readdirSync(path.join('images', p));
      }
    });
  /**
   *  Run action for every directory found
   */
  var EnemyBuildAction = EnemyDirs.map(function (_dir) {
      // Get all images in directory
      return gulp.src(path.join('images', _dir, '*.png'))
      .pipe(sprite({ // build sprite
          'name' : [_dir, '.png'].join(''),
          'orientation' : 'horizontal'
      }))
      .pipe(gulpif('*.png', gulp.dest(path.join('build')))); // output
    });
  return es.concat.apply(null, EnemyBuildAction); // concat actions
});

Maximum event listeners reached..

The directory structure is quite large, like

images\
       enemy.bat\
                 1.png
                 2.png
                 3.png

There are like 50 enemy directories with multiple .png files.

What can i do to avoid the max listeners error?

回答1:

1. Hacky solution

I don't think this is a good solution but you can change max listener limit.

var merged = es.merge.apply(es, EnemyBuildAction);
merged.setMaxListeners(0);
return merged;

Node.js event-stream: Where to setMaxListeners?

2. Create a stream like gulp plugins

This alternative would be better. Let's create a transform stream that takes directories and outputs sprites.

var gulp = require('gulp');
var through = require('through2');
var sprite = require('css-sprite').stream;
var gulpif = require('gulp-if');
var path = require('path');
var extend = require('util')._extend;

function push(stream, callback) {
  function transform(file, enc, cb) {
    stream.push(file);
    cb();
  }
  function flush(cb) {
    callback();
    cb();
  }
  return through.obj(transform, flush);
}

function dirSprite(options) {
  function transform(file, enc, callback) {
    var opts = extend({
      name: file.relative + '.png'
    }, options);
    gulp.src(path.join(file.path, '*.png'))
        .pipe(sprite(opts))
        .on('error', callback)
        .pipe(push(this, callback));
  }
  return through.obj(transform);
}

gulp.task('gen:enemies', function () {
  gulp.src('images/enemy*')
      .pipe(dirSprite({ orientation: 'horizontal' }))
      .pipe(gulpif('*.png', gulp.dest('build')));
});

回答2:

i used the streamqueue module, i pushed more than 50 directories, without an node.js warning for event listeners limit

var gulp = require('gulp');
var es = require('event-stream');
var fs = require('fs');
var sprite = require('css-sprite').stream;
var path = require('path');
var gulpif = require('gulp-if');
var streamqueue = require('streamqueue');

/**
 *  Returns directories name under folder 
 *  which match regex parameter
 */
function filterDirs(folder,regex){
  return fs.readdirSync(path.join(folder)).filter(function(f){
    if(f.match(regex)){
      return fs.readdirSync(path.join(folder,f));
    }
  });
}

gulp.task('gen:enemy:sprites', function () {
  /**
   *  Run action for every directory found
   */
  var EnemyDirs=filterDirs('images',/^enemy/);
  var streamBuildAction = streamqueue({
      objectMode : true
    });
  EnemyDirs.forEach(function (_dir) {
    streamBuildAction.queue(gulp.src(path.join('images', _dir, '*.png'))
      .pipe(sprite({ // build sprite
          'name' : [_dir, '.png'].join(''),
          'orientation' : 'horizontal'
        })));
  });
  return streamBuildAction.done().pipe(gulp.dest(path.join('build')));
});

来源：https://stackoverflow.com/questions/22258404/gulp-concatening-multiple-actions