Генерация svg спрайтов при помощи Gulp
В данной статье мне хотелось бы рассказать вам, об автоматизации создания css спрайтов при помощи сборщика Gulp. Речь пойдет не о привычных нам png\jpg картинках, а о векторных svg. Я думаю о преимуществе вектора над растром рассказывать не стоит.
И так что нам для этого понадобиться.
- Установленный на локальной машине пакетный менеджер NPM (Node js).
- Сборщик Gulp.
- Расширение для гулпа — gulp-svg-sprites (https://www.npmjs.com/package/gulp-svg-sprites)
Поехали:
Переходим в рабочую директорию нашего проекта и запускаем консоль. При условии что npm у нас уже установлен.
Создаем package.json — командой npm init. Все параметры можно оставить по умолчанию.
Примерно так он будет выглядеть:
{
"name": "gulp.local",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-svg-sprites": "^4.0.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Устанавливаем локальный Gulp и сохраняем его в dev зависимости:
npm install --save-dev gulp
Устанавливаем расширение для работы с svg спрайтами:
npm install --save-dev gulp-svg-sprites
Создаем конфигурационный файл гулпа (gulpfile.js) и заполняем его.
Сверху подключаем гулп и расширение.
const gulp = require('gulp');
const svgSprite = require("gulp-svg-sprites");
Далее пишем задачку для генерации.
gulp.task('svg', function () {
return gulp.src('svg/*.svg')
.pipe(svgSprite({
selector: "i-sp-%f",
svg: {
sprite: "svg.svg"
},
svgPath: "%f",
cssFile: "svg_sprite.css",
common: "ic"
}
))
.pipe(gulp.dest("media"));
});
Расшифровка:
- return gulp.src(‘svg/*.svg’) — тут путь для svg картинок
- selector: «i-sp-%f», — этот параметр отвечает за префикс классов при генерации стилей (.i-sp-название-файла)
- svg: { sprite: «svg.svg» }, — название спрайта
- svgPath: «%f», — путь к файлу спрайтов
- cssFile: «svg_sprite.css», — генерируемый css файл
- common: «ic» — по умолчанию родительский класс всех иконок будет icon, так вот параметр common меняет его на произвольный.
- .pipe(gulp.dest(«media»)); — папка для сохранения всех исходных файлов
Весь файл целиком:
'use_strict';
const gulp = require('gulp');
const svgSprite = require("gulp-svg-sprites");
gulp.task('svg', function () {
return gulp.src('svg/*.svg')
.pipe(svgSprite({
selector: "i-sp-%f",
svg: {
sprite: "svg.svg"
},
svgPath: "%f",
cssFile: "svg_sprite.css",
common: "ic"
}
))
.pipe(gulp.dest("media"));
});
Если все сделали правильно, пишем в консоле gulp svg и наблюдаем за генерацией наших файлов. На выходе получаем наш спрайт который вмещает в себя все наши иконки. И css файл стилей с готовыми классами и размерами.
Также по умолчанию создается html превью файл со всеми иконками и подсказками как ими пользоваться.
