PDA

Zobacz pełną wersję : gulp svg sprite zmiana nazwy pliku svg



rkonik
02-01-2019, 23:34
Na wstępie powiem że Gulp nie jest moją mocną stroną i ciągle się uczę jak to stosować i jak ułatwić sobie pracę.

Dlatego zwracam się do osób które są biegłe w temacie. Otóż mam projekt w którym jest sporo ikonek svg do użycia. By zmniejszyć ilość zapytań postanowiłem użyć sprite. Moim zdaniem najłatwiejszy sposób.
Dlatego też zrobiłem takie zadania gulp:

var gulp = require('gulp'),
svgSprite = require('gulp-svg-sprite');

var config = {
dest: '.',
mode: {
css: {
dest : '.',
sprite : 'sprite.svg',
render: {
css : {dest : 'css/sprite.css'},
scss: {
dest : './sass/_sprite.scss'
}
}
}
}
};

gulp.task('svg', function () {
return gulp.src('./img/*.svg')
.pipe(svgSprite(config))
.pipe(gulp.dest('./temp/'))
});

Z tego co zrozumiałem z dokumentacji pliksprite.svg powinien się zapisać jako sprite.svg a tym czasem zapisuje się jako sprite-<znaki>.svg
Czy jest ktoś w stanie mi powiedzieć jaki błąd popełniłem? Czy może czegoś nie zrozumiałem z dokumentacji.

na koniec oczywiście
"gulp": "^3.9.1",
"gulp-svg-sprite": "^1.5.0"

Z góry dzięki za podpowiedź

zwiastun
03-01-2019, 17:37
A gdzie Ci to ma zadziałać? W pracy nad szablonem czy w działającym szablonie? Bo to funkcja obsługująca przetwarzanie scss-a na css.

rkonik
03-01-2019, 18:55
W pracy nad szablonem. Nie do końca jest to funkcja przetwarzająca scss na css.
Jest to bardzo łatwy sposób wykonania sprite z wielu svg. Wskazując folder w którym znajdują się pliki svg, u mnie to głównie małe ikony.

Zadanie Gulp ładnie wykonuje z tego sprite.svg do tego wyrzuca plik .css i .scss. W dalszej części w innym zadaniu plik scss jest prze zemnie dołączany do głównego pliku template.scss a następnie za pomocą gulpa z wielu plików scss składam jeden plik css. Mniej zapytań do serwera to zawsze na plus tak uważam.

Wszystko działa ładnie i bardzo przyśpiesza mi pracę nad szablonem. Jednak sam plik sprite.svg chciałem jeszcze wykorzystać w innym miejscu ale w tym samym projekcie dlatego zależało mi aby jego nazwa była sprite.svg a nie jak teraz np. sprite-acef22e5.svg W chwili dodania lub zmiany jakiejkolwiek ikonki w głównym folderze z mediami /img, wówczas nazwa pliku sprite.svg się zmienia.
Dlatego też szukam informacji jak zrobić aby ta nazwa pliku wyjściowego svg była zawsze taka sama.