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

Для генерации SVG-спрайтов из вложенных папок с использованием Gulp.js можно воспользоваться несколькими плагинами. В этом ответе я рассмотрю комбинацию следующих плагинов: gulp-svg-sprite и gulp-rename.

1. Установка плагинов:
Выполните следующую команду в терминале для установки плагинов gulp-svg-sprite и gulp-rename:

   npm install gulp-svg-sprite gulp-rename --save-dev

2. Создание задачи Gulp:
В вашем gulpfile.js определите задачу Gulp, которая будет выполнять следующие действия:
a. Сборка всех SVG-файлов из вложенных папок в единый спрайт.
b. Переименование файла спрайта.

Вот пример кода для этой задачи:

   const gulp = require('gulp');
   const svgSprite = require('gulp-svg-sprite');
   const rename = require('gulp-rename');

   gulp.task('sprite', function () {
     return gulp.src('path/to/your/svg/files/**/*.svg')  // замените путь на директорию, в которой содержатся ваши SVG-файлы
       .pipe(svgSprite({
         mode: {
           symbol: {
             dest: '.',
             sprite: 'sprite.svg',  // имя выходного спрайта
           }
         }
       }))
       .pipe(rename({dirname: ''}))  // удаляем вложенную структуру папок
       .pipe(gulp.dest('path/to/output/directory'));  // задайте путь к директории, в которой будет сохранен спрайт
   });

Вам также потребуется настроить путь до папки с SVG-файлами в методе gulp.src() и указать путь для сохранения спрайта в методе gulp.dest().

Обратите внимание на опцию {dirname: ''} в плагине gulp-rename. Она удаляет весь путь до файла спрайта и сохраняет его в корневой директории вывода. Если вы хотите сохранить некоторую структуру папок, вам придется настроить ее название в gulp-rename.

3. Запуск задачи Gulp:
Чтобы запустить задачу Gulp, выполните команду gulp sprite в терминале. Это создаст спрайт SVG в указанной директории вывода.

Таким образом, используя комбинацию плагинов gulp-svg-sprite и gulp-rename, вы можете генерировать SVG-спрайты из вложенных папок при помощи Gulp.js.