Курс биткоина
6,316 $
главная/Генерация svg спрайтов при помощи Gulp
svg sprites with gulp

Генерация svg спрайтов при помощи Gulp

В данной статье мне хотелось бы рассказать вам, об автоматизации создания css спрайтов при помощи сборщика Gulp. Речь пойдет не о привычных нам png\jpg картинках, а о векторных svg. Я думаю о преимуществе вектора над растром рассказывать не стоит.

 

И так что нам для этого понадобиться.

  1. Установленный на локальной машине пакетный менеджер NPM (Node js).
  2. Сборщик Gulp.
  3. Расширение для гулпа — 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 превью файл со всеми иконками и подсказками как ими пользоваться.

gulp svg sprites example