Gulp: генерация нескольких спрайтов?

Question

[massef]

Добрый день.

Можно ли в Gulp генерировать несколько спрайтов? Например указать кол-во изображений для одного спрайта.

В идеале, если будет следующая схема.
Имеется папка images, в ней множество папок внутри которых иконки для конкретного компонента, т.е. одна папка это один компонент. Было бы не плохо генерировать отдельный спрайт для каждой такой папки.

Исходники

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

Отдает

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

При этом стили для спрайта, тоже должны "дробиться" на отдельный файлы.
Это можно делать вручную, создавая под каждую папку отдельный таск, но хочется одним таском автоматически.
Есть ли решение?

Answer 1

[ChickenGrinder]

Можно посмотреть в сторону плагина `gulp-if`, но все равно придется указаывать папки, что почти равносильно созданию отдельных тасков.
Псевдо код, как-то так:

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

Если вы хотите полную автоматизацию, то думаю, что без создания отдельного плагина (или Transform потока) не обойтись.

Answer 2

[faragly]

А как насчет того, чтобы узнать все папки внутри images с помощью globby и и для каждой папки создать поток, затем объединить их с помощью 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);
});