Почему 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, для создания локального сервера