Gulp: generating multiple sprites?

Question

css

Good afternoon.
Is it possible to generate multiple sprites in Gulp? For example, specify the number of images for one sprite.
Ideally, if there is a following scheme.
There is an images folder, it has a lot of folders inside which icons for a particular component, i.e. one folder is one component. It would not be bad to generate a separate sprite for each such folder.
Sources

src / 
--- images /
------ component-1 /
--------- images-1.png
--------- images-2.png
--------- ...
------ component-2 /
--------- images-1.png
--------- images-2.png
--------- ...

Gives away

build / 
--- images /
------ component-1 /
--------- sprite-component-1.png
------ component-2 /
--------- sprite-component-2.png

At the same time, the styles for the sprite should also be "split" into separate files.
This can be done manually by creating a separate task for each folder, but I want one task automatically.
Is there a solution?

Answer 1

You can look in the direction of the `gulp-if` plugin, but you still have to specify folders, which is almost equivalent to creating separate tasks.
Pseudo code, something like this:

gulp.task("design.sprites_test", function() {
  var spriteOutput = gulp.src("src/design/flags.css")
    .pipe(g.spriteGenerator({
      padding : 10,
      algorithm: "binary-tree",
      spriteSheetName: "flags.png",
    }));
  spriteOutput.css
    .pipe(gulp.dest("./build/design"));
  spriteOutput.img
    .pipe(g.if(/components1/, gulp.dest("./build/components1")))
    .pipe(g.if(/components2/, gulp.dest("./build/components2")))
    .pipe(g.if(/components3/, gulp.dest("./build/components3")))
});

If you want full automation, then I think that you can't do without creating a separate plugin (or Transform stream).

Answer 2

How about finding out all the folders inside images with globby and and for each folder create a stream, then merge them with event-stream.merge?

var globby = require('globby'),
    es = require('event-stream');
.....
gulp.task('sprites', function () {
    var imgDirs = globby.sync('src/images/*');
    imgDirs.map(function (dir) {
        return gulp.src(dir)
                .pipe(...); // здесь вся обработка и сохранение
    });
    return es.merge(imgDirs);
});