Създаване на CSS спрайтове с Gulp

По някакъв начин вече писах за автоматичнотосъздаване на спрайтове в PhpStorm. За съжаление, самият аз бързо не харесах този метод поради сложността на настройката на ново място, прикачването към python (който изобщо не използвам) и всякакви малки неща. Нека да се отървем от всички тези недостатъци при създаването на CSS спрайтове.

Спрайт инструменти

За този урок се нуждаем само от Gulp и малко ноу-хау, за да го използваме. Ако не знаетекакво е Gulp, камо ли как даосновно го настроите, прочететестатиите на връзката, ще ви бъде полезно.

Ще използваме и LESS заедно с CSS. Защо точно той, а не любимият на всички SASS? Само защото. Ако желаете, спрайтовете могат да бъдат превключени както към него, така и към обикновен CSS.

Създаване на CSS спрайтове

За да създадем спрайтове, имаме нужда от следните Node.js библиотеки:

  • Саматаглътка (къде би била без нея)
  • del - изтриване на файлове
  • gulp.spritesmith - директно създаване на спрайтове
  • gulp-imagemin - минимизиране на изображения

Разбира се, този набор е малко извън стандартната задача, но ние искаме да имаме удобно създаване на спрайтове без последващи проблеми.

Сега нека да разгледамеgulpfile. Тук имаме две задачи. Един запремахване на стари спрайтове, а другият за директносъздаване на тях.

В променливатаconfig съхранявам пътищата до папките за източник и компилация. Те са просто низови променливи. Доста просто и удобно.

И така, какво се случва в задачатаsprite-create ? Първото нещо, което правим, е да генерираме уникално файлово име за спрайта. Това е необходимо, за да не се занимавате с кеширане. Нека името е уникално всеки път и никъде няма да има проблеми. След това настроихмеплъгинspritesmith като този:

  • Задайте името на файла с изображение, генериран по-рано.
  • Задайте името на CSS файла (в нашия случай това е LESS файл).
  • Посочете формата на генериране: LESS.
  • Промяна на името на класа за спрайта. Предпочитам да добавя префиксicon- към класове. Можете да използвате всичко, зависи от вас.
  • Посочете пътя за изображението. Този път ще се използва в CSS, така че съм го настроил като относителен.

След това добавяме PNG оптимизация към спрайта, за да намалим малко размера му. Всъщност размерът е намален с 30-40%, което е доста добре.

Сега малко за местоположението на файловете в тази конфигурация:

  • Поставяме изображенията за спрайта в/i/sprite като PNG файлове. Името на файла ще служи като клас в CSS/LESS.
  • Файлът sprite.less ще се появи в папката/less, която ще съдържа генерираните класове за нашия спрайт.
  • Самият спрайт файл ще се появи в папката/i.

Как да използвате получената работа?

Анализирайте файла sprite.less, той съдържа много интересни неща. Най-основното нещо, от което се нуждаете, е миксина LESS .sprite(). Използва се само за спрайтове. Например така:

Честно казано, не ми се стори много удобно. Предпочитам да добавям класове директно към HTML, защото Обикновено имам един елемент - това е една икона. Затова използвам следния миксин:.sprites(@spritesheet-sprites); Той генерира списък с класове и ви позволява да посочите желаните класове директно в HTML, много удобно.

Готов. Така ние просто научихме как да генерираме CSS спрайтове на Gulp. В крайна сметка няма нищо по-лесно от това да хвърлите файл с икона в папка и заизползвайте тази икона, за да регистрирате клас, подобен на името на файла.