browser-syn c stream svg при использовании символов svg - PullRequest
Новая
       109

browser-syn c stream svg при использовании символов svg

1 голос
/ 26 мая 2020

Я пытаюсь добавить browser-syn c к существующей настройке gulp. В моем gulpfile у меня есть задача, которая берет svgs в папку и создает один файл svg с <symbol> для каждого отдельного файла svg.

В html отдельные svg используются так, где SpriteFile.svg - это файл, содержащий <symbol> s, а icon-name - id одного из этих <symbol> элементов. 

<svg width="16" height="16">
    <use xlink:href="/SpriteFile.svg#icon-name"></use>
</svg>

Это все работает нормально, но я не могу получить синхронизацию браузера c для обновления значков. Моя задача выглядит так: 

gulp.src(`./Icons/*.svg`)
    .pipe( svgstore( { inlineSvg: true } ) )
    .pipe( rename( 'SpriteFile.svg' ) )
    .pipe( gulp.dest( './' ) )
    .pipe(browserSync.stream());

В консоли browser-syn c я вижу, что она принимает изменения. И я вижу в инструментах разработчика, что веб-сокет был доставлен в браузер. Но браузер не обновляет значок (значки).

Я полагаю, это потому, что путь, который он пытается обновить, - SpriteFile.svg, но на странице он упоминается как SpriteFile.svg#icon-name, и он считает, что это не те же файлы. Как я могу указать браузеру-syn c обновить все пути, соответствующие SpriteFile.svg, включая суффикс символа?

...