Здравствуйте! столкнулся вот с какой проблемой:
какая то чехарда с плагином gulp-svg-sprite, картинки из спрайта не отображается пока не перейдешь и не откроешь в браузере какую нибудь картинку из этого спрайта, при этом файлы которые сделаны через настройку
shape: { dest: "intermediate-svg"} ведут себя так же.
Еще раз как это не работает:
Переходим на страницу:
sedona.u0718915.isp.regruhosting.ru - видим что в шапке не отображается svg картинка (welcome) вставленная через background css.
Идем по адресу:
sedona.u0718915.isp.regruhosting.ru/img/svg/sprite...
и видим что картинка открывается, далее, !в этой же вкладке! убираем часть пути и оставляем
sedona.u0718915.isp.regruhosting.ru - и переходим, и .. видим что все работает ( картинка welcome) появилась!
Что это может быть?
п.с. такое поведение замечено только при работе через css или тег img, через тег svg открывается сразу.
Спасибо всем откликнувшимся!
-
код таска svg:
let svgSprite = require('gulp-svg-sprite'),
svgmin = require('gulp-svgmin'),
cheerio = require('gulp-cheerio'),
replace = require('gulp-replace'),
browsersync = require('browser-sync'),
debug = require('gulp-debug'),
svgPath = {
"input": "./source/pictures/svg/*.svg",
"output": "./public/img/svg/"
};
module.exports = function () {
$.gulp.task('svg', () => {
return $.gulp.src(svgPath.input)
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: {xmlMode: true}
}))
.pipe(replace('>', '>'))
.pipe(svgSprite({
inline: true,
shape: {
dest: "intermediate-svg"
},
mode: {
stack: {
sprite: "../sprite.svg"
}
}
}))
.pipe($.gulp.dest(svgPath.output))
.pipe(debug({
"title": "Sprites"
}))
.on("end", browsersync.reload);
});
};
Простой
Средний
Простой
