0

При настройке gulp столкнулся с проблемой. Установил npm плагин gulp-svg-sprite для создания svg-спрайта, подключил его и создал gulp-task вот так:

project_folder = 'dist';
const src_folder = '#src';
const path = {
    build: {
        html: project_folder + '/',
        css: project_folder + '/css',
        js: project_folder + '/js',
        img: project_folder + '/img',
        fonts: project_folder + '/fonts',
    },
    src: {
        html: [src_folder + '/*.html', '!' + src_folder + '/_*.html'],
        css: src_folder + '/scss/style.scss',
        js: src_folder + '/js/script.js',
        img: src_folder + '/img/**/*.{jpg, png, svg, gif, ico, webp}',
        fonts: src_folder + '/fonts/**/*.ttf',
    },
    watch: {
        html: src_folder + '/**/*.html',
        css: src_folder + '/scss/**/*.scss',
        js: src_folder + '/js/**/*.js',
        img: src_folder + '/img/**/*.{jpg, png, svg, gif, ico, webp}',
    },
    clean: './' + project_folder + '/',
}

... // подключение других плагинов

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

... // другие функции, не относящиеся к svg-спрайтам

const config = {
    mode: {
        stack: {
            sprite: '../sprite.svg',
            example: true
        }
    }
}
gulp.task('svgSprite', function() {
    return gulp.src([src_folder + '/iconsprite/*.svg'])
      .pipe(svgSprite(config))
      .pipe(gulp.dest(path.build.img));
});

И после запуска таска я получаю вот это:

$ gulp svgSprite
[17:43:13] Using gulpfile C:\Web\Pet-projects\ToDo\gulpfile.js
[17:43:13] Starting 'svgSprite'...
[17:43:13] Finished 'svgSprite' after 53 ms

Такс выполнился без ошибок, но спрайт и html файл с примером использования спрайтов не появляются.

Файлы в папке src Файлы в папке dist

За основу брал вот это видео с настройкой gulp и эту статью про использование gulp-svg-sprite.

Не понимаю, в чем проблема. Похожих случаев в интернете не нашел.

Версия gulp - 4.0.2
Версия gulp-svg-sprite - 1.5.0

1 ответ 1

1

Папка для создания спрайтов не img, в src нужно создать папку iconsprite и поместить туда файлы svg.

Здесь указан путь, который у вас задан:

   gulp.task('svgSprite', function() {
    return gulp.src([src_folder + '/iconsprite/*.svg'])
      .pipe(svgSprite(config))
      .pipe(gulp.dest(path.build.img));
});

return gulp.src([src_folder + '/iconsprite/*.svg'])

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.