В моем предыдущем посте я говорил о том, как GruntJS может оптимизировать ваш рабочий процесс, автоматизируя множество повторяющихся задач. Если у вас нет опыта работы с GruntJS, я предлагаю вам прочитать мой первый пост в блоге Как улучшить рабочий процесс с помощью GruntJS, чтобы ознакомиться с программой.

Как веб-разработчик, я всегда забочусь о производительности и оптимизации веб-страницы. Я всегда хочу предоставить своему клиенту быстрый и эффективный веб-сайт. Вот почему частью моей работы является создание таблицы спрайтов изображений, чтобы ускорить время загрузки за счет минимизации количества запросов к серверу.

Изначально я создавал свой спрайт-лист в Photoshop. Это было болезненно, отнимало много времени и было довольно трудно справиться с течением времени. Определенно не лучший подход, но это был единственный известный мне инструмент, который мог бы справиться с этой задачей. По крайней мере, улучшение скорости оправдывало усилия.

Когда я обнаружил GruntJS, я знал, что есть лучший способ автоматизировать создание спрайт-таблиц изображений с помощью этого инструмента. Быстрый поиск в Google привел меня к этому модулю NodeJS, который поддерживает задачи GruntJS, автор Ричард Батлер. Эта библиотека делает всю тяжелую работу и даже больше. Это просто потрясающе! Он даже поддерживает соотношение пикселей для создания спрайтов высокого разрешения для экрана высокой плотности и нормального разрешения для обычного экрана!

Установка

Сначала откройте Терминал и перейдите в папку проекта grunt.js. Затем введите npm install node-spritesheet — save-dev, чтобы установить модуль в свой проект.
После завершения установки загрузите модуль в файл grunt.js. добавив grunt.loadNpmTasks('node-spritesheet'); перед регистрацией задач.
После установки и загрузки node-spritesheet готов к использованию.

Структура папок

Я создаю следующую структуру папок.

my-project/ 
    img/
    styles/
    src/
       img/
          legacy/
          spritesheet/

Я сохраняю все изображения спрайтов в src/img/normal и вывожу результирующий лист спрайтов в img/.
Поскольку я все еще поддерживаю IE7 и IE8, мне часто нужно для создания изображений для эмуляции функций CSS3, таких как градиент, радиус границы или тень. Я помещаю эти изображения в src/img/legacy/.
Затем я использую Photoshop, чтобы сохранить PNG-файлы всех этих спрайтов в эти два каталога, в зависимости от случая.

Конфигурация

Здесь происходит вся магия. Я создаю два спрайт-листа. Один для устаревших браузеров, которые включают только изображения для эмуляции функций CSSS3, а другой для остальных.
Откройте файл grunt.js и запишите этот фрагмент:

Задача просматривает все изображения, расположенные в /src/img/, и фильтрует файлы на основе имени родительской папки. Если изображение находится в /src/img/legacy/, оно будет использоваться в устаревшей таблице спрайтов. В противном случае он будет частью таблицы спрайтов по умолчанию. Он создает два результирующих спрайт-листа PNG и результирующий файл CSS. Файл CSS содержит все имена классов спрайтов и координаты x, y в таблице спрайтов.

Я также настроил задачи наблюдения, которые просматривают папку /src/img/ и запускают задачу таблицы спрайтов при изменении любого файла. Излишне говорить, что это огромная экономия времени.

Использование полученных спрайтов и таблиц стилей в вашем html

Во-первых, вам нужно включить таблицу стилей в ваш HTML-документ. Создайте index.html в корневой папке проекта и используйте следующий код:

Примечание: node-spritesheet может иметь неправильный путь к таблице спрайтов в таблице стилей. Если это так, я предлагаю вам переопределить классы .sprite и .sprite-legacy следующим образом:

<style>
   .sprite { background-image: url(img/spritesheet.png); }
   .sprite-legacy { background-image: url(img/spritesheet-legacy.png); }
</style>

Чтобы использовать спрайт из таблицы спрайтов, просто добавьте класс sprite к элементу HTML и соответствующий класс sprite.filename, как в примере выше.
Используйте тот же метод. чтобы использовать устаревшую таблицу спрайтов, заменив класс спрайта на sprite-legacy и используя соответствующую позицию спрайта. (пример: sprite-legacy.filename)

Вывод

С помощью GruntJS автоматизировать создание таблиц спрайтов очень просто. Это сэкономит время и усилия и поможет вам поддерживать свой спрайт-лист в будущем. Я никогда не буду оглядываться на Photoshop для создания и управления моей таблицей спрайтов.