Создание CSS спрайтов с помощью Gulp

Как-то я уже писал про автоматическое создание спрайтов в PhpStorm. К сожалению, тот метод мне самому быстро разонравился из-за сложности настройки на новом месте, привязанности к питону (которым я вообще не пользуюсь) и еще всяких мелочей. Давайте избавляться от всех этих недостатков при создании CSS спрайтов.

Инструменты для создания спрайтов

Для этого урока нам понадобится только Gulp и немного умения им пользоваться. Если вы не знаете что такое Gulp, а тем более как его базово настроить, почитайте статьи по ссылке, пригодится.

Я буду работать в PhpStorm. Мне это просто удобно, вы можете использовать любой редактор или IDE которые вам нравятся.

Так же вместе CSS мы будем использовать LESS. Почему именно его, а не излюбленный всеми SASS? Да просто так. При желании спрайты можно будет переключить и на него и на обычный CSS.

Создаем CSS спрайты

Для создания спрайтов нам понадобятся следующие библиотеки Node.js:

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

Конечно этот набор немного выходит за рамки стандартной задачи, но мы то хотим получить удобное создание спрайтов без последующих проблем.

// package.json

{
  "name": "Sprites",
  "version": "1.0.0",
  "description": "web-site",
  "main": "gulpfile.js",
  "dependencies": {
    "del": "^1.2.0",
    "gulp": "^3.9.0",
    "gulp.spritesmith": "^3.8.2",
    "gulp-imagemin": "^2.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Теперь посмотрим на gulpfile. Здесь у нас две задачи. Одна для удаления старых спрайтов, а другая непосредственно для их создания.

В переменной config я храню пути к папкам исходников и билда. Это просто строковые переменные. Достаточно просто и удобно.

// gulpfile.js

var gulp = require('gulp');
var del = require('del');
var spritesmith = require('gulp.spritesmith');
var imagemin = require('gulp-imagemin');

// Удаление старых файлов
gulp.task('sprite-clean', function (cb) {
    del([config.destDir + '/i/sprite-*.png'], cb);
});

// Создание спрайтов
gulp.task('sprite-create', ['sprite-clean'], function () {
    var fileName = 'sprite-' + Math.random().toString().replace(/[^0-9]/g, '') + '.png';

    var spriteData = gulp.src(config.sourceDir + '/sprite/*.png')
        .pipe(spritesmith({
            imgName: fileName,
            cssName: 'sprite.less',
            cssFormat: 'less',
            cssVarMap: function (sprite) {
                sprite.name = 'icon-' + sprite.name;
            },
            imgPath: '../i/' + fileName
        }));

    spriteData.img
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            //use: [pngquant()]
        }))
        .pipe(gulp.dest(config.destDir + '/i/'));

    spriteData.css
        .pipe(gulp.dest(config.sourceDir + '/less/'));

    return spriteData;
});

Что же происходит в задаче sprite-create? Первым делом мы генерируем уникальное имя файла для спрайта. Нужно это для того чтобы не заморачиваться с кэшированием. Пусть имя будет каждый раз уникально и нигде не возникнет неполадок. Затем мы настраиваем плагин spritesmith следующим образом:

• Задаем имя файла изображения, сгенерированное ранее.
• Задаем имя CSS файла (в нашем случае это LESS файл).
• Указываем формат генерации: LESS.
• Модифицируем имя классов для спрайта. Я предпочитаю добавлять префикс icon- к классам. Можно использовать что угодно, это ваше дело.
• Указываем путь расположения картинки. Этот путь будет использоваться в CSS, поэтому у меня он указан относительный.

Затем мы добавляем оптимизация PNG к спрайту, чтобы немного сократить его размер. На деле размер сокращается процентов на 30-40%, что вполне себе неплохо.

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

• Изображения для спрайта складываем в {src}/i/sprite в виде PNG файлов. Название файла будет служить классом в CSS/LESS.
• В папке {src}/less появится файл sprite.less, который будет содержать сгенерированные классы для нашего спрайта.
• В папке {dest}/i появится сам файл спрайта.

Как же использовать получившееся произведение?

Разберите файл sprite.less, он содержит много интересного. Самое базовое, что вам понадобится, это LESS миксин .sprite(). Он как раз и используется для спрайтов. Например так:

.my-icon {
    .sprite(@icon-filename);
}

Мне это, честно, показалось не слишком удобным. Мне больше нравится добавлять классы непосредственно в HTML, т.к. обычно у меня один элемент - это одна иконка. Поэтому я использую следующую примесь: .sprites(@spritesheet-sprites); Она генерирует список классов и позволяет непосредственно в HTML указывать нужные классы, очень удобно.

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