gulp-css-gmspriter

Простой инструмент для создания спрайтов CSS на мобильных устройствах.

Зависимые библиотеки:

Node.js

GraphicsMagick можно скачать по адресу: http://www.graphicsmagick.org/

Python можно скачать по адресу: https://www.python.org/

Дополнительные библиотеки

Compass + Ruby + Sass

Основные функции

1. Обрабатывает исходные изображения, которые необходимо объединить. Изображения сохраняются в каталоге images/icons/, а результат выводится в каталог images/slice/.
   

   В каталоге images/icons/ хранятся исходные изображения с разрешением 2x.
   

   В каталоге images/slice/ создаются изображения с разрешениями 1x и 2x
   

2. Использует инструмент gm для масштабирования изображений.

3. Использует gulp + gulp-css-spritersmith плагин для объединения фрагментов кода CSS.

4. Результат сохраняется в каталоге publish/.

Преимущества

1. Не нужно изменять исходный код CSS файлов.
2. Можно настроить путь к исходным изображениям, например, images/icons/.
3. Автоматически добавляет код media query для мобильных устройств, что позволяет адаптировать изображения под разные типы экранов (например, retina).

Недостатки

1. Необходимо вручную вводить код CSS для исходных фрагментов изображений:

.m-icon-fail{
    background: url(#{$icon_1_path}/m-pay-err.png) no-repeat;
    width:100px;
    height:100px;
}


.m-icon-success{
    background: url(#{$icon_1_path}/m-suc.png) no-repeat;
    width:28px;
    height:28px;
}

Результат объединения:

.m-icon-fail { background: no-repeat;background-position: 0 0; width: 100px; height: 100px; }

.m-icon-success { background: no-repeat;background-position: 0 -183px; width: 28px; height: 28px; }

Пример использования

После загрузки zip-архива выполните команду npm install, затем запустите gulp. Если у вас нет среды compass, пожалуйста, измените настройки в gulpfile.js соответствующим образом, чтобы использовать только CSS мониторинг.