Как генерировать SVG-спрайты из вложенных папок?

Question

[Илья]

Использую gulp-svg-sprite для генерации SVG-спрайтов при верстке.

Структура входящих файлов следующая:

-- icons
    -- collection1
        -- icon1.svg
        -- icon2.svg
    -- collection2
        -- icon1.svg
        -- icon2.svg

где collection1, icon1.svg -- произвольные имена папок и файлов.

Желаемая структура выходящих файлов следующая:

-- icons
    -- collection1.svg
    -- collection2.svg

где collection1.svg, collection2.svg -- спрайты, имена которых сформированы из имен соответствующих вложенных папок во входящих файлах.

Подскажите, как правильно сформировать таск, чтобы он автоматически генерировал и именовал спрайты на основании вложенных папок?

Предположение: возможно, средствами Gulp этого не сделать и нужно использовать стороннюю утилиту для обхода вложенных папок.

Мой текущий таск (генерирует единый спрайт)

Таск:

import { paths } from "../gulpfile.babel";
import gulp from "gulp";
import svg from "gulp-svg-sprite";

gulp.task("sprites", () => {
	return gulp.src(paths.sprites.src)
		.pipe(svg({
			shape: {
				dest: "intermediate-svg"
			},
			mode: {
				stack: {
					sprite: "../sprite.svg"
				}
			}
		}))
		.pipe(gulp.dest(paths.sprites.dist));
});

Файл gulpfile.babel.js:

const paths = {
	sprites: {
		src: "./src/images/icons/**/*.svg",
		dist: "./dist/images/icons/"
	}
};

export { paths };

Answer 1

[Илья]

Предположение оказалось верным: нужно пробежаться по вложенным папкам при помощи сторонних утилит и для каждой отдельной папки запустить создание спрайта.

Единственная проблема -- вложенные папки (исходники) тоже копируются в результирующую папку.

Новый таск

Таск:

import fs from "fs";
import path from "path";
import merge from "merge-stream";
import { paths } from "../gulpfile.babel";
import gulp from "gulp";
import svg from "gulp-svg-sprite";

function getFolders(dir) {
    return fs.readdirSync(dir).filter(function(file) {
		return fs.statSync(path.join(dir, file)).isDirectory();
	});
}

gulp.task("sprites", () => {
	var folders = getFolders(paths.sprites.src);

	if(folders.length === 0) return;

	var subfolders = folders.map(function(folder) {
		return gulp.src(path.join(paths.sprites.src, folder, "/*.svg"))
			.pipe(svg({
				mode: {
					stack: {
						sprite: ("../" + folder + ".svg")
					}
				}
			}))
			.pipe(gulp.dest(paths.sprites.dist));
	});

	var root = gulp.src(path.join(paths.sprites.src, "/*.svg"))
		.pipe(svg({
			mode: {
				stack: {
					sprite: "../main.svg"
				}
			}
		}))
		.pipe(gulp.dest(paths.sprites.dist));

	return merge(subfolders, root);
});

Файл gulpfile.babel.js:

const paths = {
  sprites: {
    src: "./src/images/icons/",
    dist: "./dist/images/icons/"
  }
};

export { paths };