Почему sprite.svg не отображаются через gulp (но отображается через live server)?

Написал gulp - все работает, все компилируется

let project_folder="dist"; //выгружаемая папка для демонстрации заказчику
let source_folder="src"; //папка с исходниками

//создание объектов, которые содержат пути к файлам и папкам
let path ={
    build:{
        html: project_folder + "/",
        css: project_folder + "/css/",
        js: project_folder + "/js/",
        img: project_folder + "/img/",
        fonts: project_folder + "/fonts/",
    },
    src: {
        //массив [читаются все файлы, "!исключения"+ в папке + "файлы с _"]
        html: [source_folder + "/*.html", "!" + source_folder + "/_*.html"],
        css: source_folder + "/scss/style.scss",
        js: source_folder + "/js/script.js",
        img: source_folder + "/img/**/*.{png,jpg,jpeg,gif,svg,svg+xml,ico,xml,webp}",
        fonts: source_folder + "/fonts/*.ttf",
    },
    watch: {
        html: source_folder + "/**/*.html",
        css: source_folder + "/scss/**/*.scss",
        js: source_folder + "/js/**/*.js",
        img: source_folder + "/img/**/*.{png,jpg,jpeg,gif,svg,svg+xml,ico,xml,webp}",
    },
    clean: "./" + project_folder + "/"
}

//переменные плагинов
let {src,dest} = require('gulp'), //принадлежность src и dist к gulp
    gulp = require('gulp'), //переменная gulp является gulp 
    browsersync = require("browser-sync").create(), //обновление браузера
    fileinclude = require("gulp-file-include"), //сборка index.html из нескольких .html
    del = require("del"), //очистка папки dist
    scss = require("gulp-sass"), //scss плагин
    autoprefixer = require("gulp-autoprefixer"), //плагин автопрефикса
    group_media = require("gulp-group-css-media-queries"), //плагин сборки и структурирования media-файлов
    clean_css = require("gulp-clean-css"), //плагин создания несжатого css-файла
    rename = require("gulp-rename"), //плагин переименования (создания сжатого css-файла)
    uglify = require("gulp-uglify-es").default, //плагин создания несжатого js-файла
    imagemin = require("gulp-imagemin"), //плагин сжатия изображений без потери качества
    webp = require("gulp-webp"), //конвертация изображений в формат webp
    webphtml = require("gulp-webp-html"), //автоматизация picture для webp
    webpcss = require("gulp-webpcss"), //стилизация изображений webp
    svgsprite = require("gulp-svg-sprite"); //синхронизация svg спрайтов (создание из отдельных svg-фалов)
    svgmin = require("gulp-svgmin"); //минификация SVG
    cheerio = require("gulp-cheerio"); //удаление лишних атрибутов из svg
    replace = require("gulp-replace"); //фиксинг некоторых багов   
    favicon = require("gulp-favicons"); //использование фавикона

function browserSync () {
    browsersync.init({
        //сервер
        server:{
            //базовая директория (папка)
            baseDir: "./" + project_folder + "/"
        },
        //порт
        port:3000,
        //оповещение об обновлении
        notify:false
    })
}

//обработка html
function html () {
    return src(path.src.html)
    //!--pipe - команды для gulp
        //сборка аутсорс файлов в один (file-includes) [напр. _header.html в основной .html]
        .pipe(fileinclude())
        //автоматизация picture для webp
        .pipe(webphtml())
        //вывод в папку
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream())
}

//обработка css
function css () {
    return src(path.src.css)
    //!--pipe - команды для gulp
        //обработка scss
        .pipe (
            scss({
                 outputStyle: "expanded" //развернутая (не ужатая) версия, для удобства чтения
            })
        )
        //сборка медиа
        .pipe (
            group_media()
        )
        //автопрефикс
        .pipe ( 
            autoprefixer({
                //последние 5 версий браузера
                overrideBrowserslist: ["last 5 version"],
                //стиль написания автопрефикса
                cascade: true
        }))
        //стилизация изображений webp
        .pipe(webpcss())
        //todo вывод в папку (несжатая версия)
        .pipe(dest(path.build.css))
        //сборщик css (сжатие)
        .pipe(clean_css())
        //переименование (создание сжатой версии css) 
        .pipe(
            rename({
                extname: ".min.css"
            })
        )
        //todo вывод в папку (сжатая версия)    
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream())
}

//обработка js
function js () {
    return src(path.src.js)
    //!--pipe - команды для gulp
        //сборка аутсорс файлов в один (file-includes) [напр. _header.html в основной .html]
        .pipe(fileinclude())
        
        //todo вывод в папку (несжатая версия)
        .pipe(dest(path.build.js))
        //сборка (сжатие) js-файла
        .pipe(
            uglify() 
        )
        //переименование (создание сжатой версии js) 
        .pipe(
            rename({
                extname: ".min.js"
            })
        )
        //todo вывод в папку (сжатая версия) 
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream())
}

//обработка img (изображений)
function images () {
    return src(path.src.img)
    //!--pipe - команды для gulp
    //форматирование в webp
        .pipe(
            webp({
                quality: 70 //качество изображения
            })
        )

        //вывод в папку (копирование)
        .pipe(dest(path.build.img))
        //обращение к исходникам заново
        .pipe(src(path.src.img))
        //сжатие
        .pipe(
            imagemin({
                progressive: true,
                svgoPlugins: [{ removeViewBox: false }],
                interlaced: true, //работа с другими форматами
                optimizationLevel: 3 //степень сжатия (0 до 7)
            })
        )

        //вывод в папку
        .pipe(dest(path.build.img))
        .pipe(browsersync.stream())
}
    
//обработка svg (иконок)
function svgSprite () {
    //путь [исходная папка + дополнительная папка (неуказанная в основной переменной)]
    return src([source_folder + '/iconsprite/*.svg']) 
    //минифицирование svg
    .pipe(svgmin({
        js2svg: {
            pretty: true
        }
    }))
    //удаление всех объявлений заливки, стиля и обводки в фигурах
    .pipe(cheerio({
        run: function ($) {
            $('[fill]').removeAttr('fill');
            $('[stroke]').removeAttr('stroke');
            $('[style]').removeAttr('style');
        },
        parserOptions: {xmlMode: true}
    }))
    // Плагин cheerio создает ненужную строку '& gt;' (замена)
    .pipe(replace('>', '>'))
    //обработчик
    .pipe(svgsprite({
        mode: { 
            stack: {
                sprite: "../icons.svg", //имя sprite-файла и путь вывода готового спрайта
                example: true //создает html-файл с примерами иконок
            }
        }
    }))
    //выгрузка в img
    .pipe(dest(path.build.img + '/i'))
}

//слежка за файлами (внесение изменений в браузер без перезагрузки gulp)
function watchFiles () {
    //путь к файлам| наблюдение ([путь], функция)
    gulp.watch([path.watch.html],html)
    gulp.watch([path.watch.css],css)
    gulp.watch([path.watch.js],js)
    gulp.watch([path.watch.img],images)
    gulp.watch([path.watch.img],svgSprite)
}

//плагин del (удаление мусора из dist)
function clean () {
    return del(path.clean);
}

//синхронизация gulp и различных функций в ней (серия выполняемых функций)
let build = gulp.series(clean, gulp.parallel(js, css, html, images, svgSprite));

//проверка на работоспособность(сценарий выполнения)
let watch = gulp.parallel(build, watchFiles, browserSync);

//синхронизация кода и gulp (преобразование в task)

exports.svgSprite = svgSprite;
exports.images = images;
exports.js = js;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;

Вот отдельно функция sprite в gulp - все работает, все компилируется

function svgSprite () {
    //путь [исходная папка + дополнительная папка (неуказанная в основной переменной)]
    return src([source_folder + '/iconsprite/*.svg']) 
    //минифицирование svg
    .pipe(svgmin({
        js2svg: {
            pretty: true
        }
    }))
    //удаление всех объявлений заливки, стиля и обводки в фигурах
    .pipe(cheerio({
        run: function ($) {
            $('[fill]').removeAttr('fill');
            $('[stroke]').removeAttr('stroke');
            $('[style]').removeAttr('style');
        },
        parserOptions: {xmlMode: true}
    }))
    // Плагин cheerio создает ненужную строку '& gt;' (замена)
    .pipe(replace('>', '>'))
    //обработчик
    .pipe(svgsprite({
        mode: { 
            stack: {
                sprite: "../icons.svg", //имя sprite-файла и путь вывода готового спрайта
                example: true //создает html-файл с примерами иконок
            }
        }
    }))
    //выгрузка в img
    .pipe(dest(path.build.img + '/i'))
}

подключаю html к пути вывода спрайта, через use или img

<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>header</title>
</head>
<body>
  <!--!-----------0----HEADER----0------------->
  <header class="row header">
    <div class="col-2 header__logo container">
      <a href="" class="header__logo">
        <svg>
          <use xlink:href="/dist/img/i/icons.svg#logo"></use>
        </svg>
      </a>
    </div>
    <nav class="col header__menu">
      <ul class="header__nav-list">
        <li><a href="">Главная</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Преподаватели</a></li>
        <li><a href="">Курсы</a></li>
      </ul>
    </nav>
</header>
</body>
</html>

Подрубаю gulp - не работает.. (в консоли разработчика F12 пишет use 0x0 нет размера)

Подрубаю live server - работает (в консоли разработчика F12 все работает исправно, иконки отображаются)

live server - плагин в VSCode, для создания локального сервера


Ответы (0 шт):