Инструмент для объединения CSS-спрайтов
background-repeat
, background-size
и значения background-position
равные left/right/top/bottom
(значения center
и проценты %
не поддерживаются)"underline"
перед объявлениемnpm install -g imerge
Для указания, какие маленькие изображения следует объединить, достаточно добавить merge: значение
после каждого места, где указано фоновое изображение в CSS. Изображения без определённого merge
будут проигнорированы.
Пример:
div {
background: url('путь/к/изображению.png');
imerge: спрайт;
}
Затем выполните команду
imerge источник назначение [опции]
Это создаст обработанный CSS-файл и спрайт в папке назначения.
Содержимое CSS-файла будет следующим:
div {
background: url('путь/к/spirit_spirt.png');
background-position: 0px 0px;
}
Файл спрайта будет назван spirit_spirt.png
.## Полностью автоматическая конвертация
Этот метод сканирует все фоновые изображения и объединяет их в один спрайт spirit_sprite.png
. Если используется синтаксис для совместимости с IE6, то изображения будут объединены в spirit_sprite_ie6.png
.
Однако это может привести к следующим рискам:
png/gif/jpg
) они не могут быть объединеныbackground-position: center 40%
объединение невозможноbackground-repeat
объединение невозможноИспользование:
imerge источник назначение -a
Options:
-h, --help вывод информации о помощи
-V, --version вывод номера версии
-p, --pattern [шаблон] шаблон для CSS-файлов
-d, --default-padding [значение] установка значения дефолтного отступа
-a, --all Обработка всех фоновых изображений
-w, --webroot [путь] Установка пути корневого каталога. По умолчанию: путь источника. Устарел, используйте --source-context.
-c, --css-to [путь] Путь выходного файла CSS. Приоритет выше, чем у назначения
-s, --sprite-to [путь] Путь выходного файла спрайта. Приоритет выше, чем у назначения
-e, --source-context [путь] Путь корневого каталога источника
-t, --output-context [путь] Путь корневого каталога выходных данных
imerge
как модуль Node.js для программированияvar IMerge = require('IMerge');
var iMerge = new IMerge.IMerge(options, pathFilter);
iMerge.start();
{
// Директория для сканирования CSS
from: '',
// Директория для хранения обработанных CSS и спрайтовых изображений
to: '',
// Директория для хранения обработанных CSS (приоритет выше чем `to`)
cssTo: '',
// Директория для хранения спрайтовых изображений (приоритет выше чем `to`)
spriteTo: '',
// Относительная директория для абсолютных путей к изображениям в исходных файлах CSS
sourceContext: '',
// Относительная директория для абсолютных путей к изображениям в сгенерированных файлах CSS
outputContext: '',
// Шаблон для сканирования файлов
pattern: '/**/*.css',
defaults: {
// Расстояние между малыми изображениями в спрайте (в стиле CSS)
padding: null
},
options: {
// Сканирование всех значений background и background-image, независимо от наличия свойства merge
all: false
}
}
{
// Фильтр пути к изображению
imagePathFilter: function(file, conf) {
return file;
},
// Путь к выходному спрайт-изображению
spriteTo: function(merge) {
return path.join(opt.spriteTo, '/sprite_' + merge + '.png');
},
// Фильтр пути к спрайт-изображению при записи обратно в CSS
spritePathFilter: function(file) {
return file.replace(opt.outputContext, '').replace(/\\/g, '/');
},
// Путь к обработанному CSS
cssTo: function(file) {
return path.join(opt.cssTo, path.relative(opt.from, file));
}
}
```## Проблемы
1. Конфликты слияния в stylus
> Вы можете заменить конфигурацию CSS на `imerge`
> ```css
> div {
> background: url('path/to/image.png');
> imerge: sprite;
> }
> ```
imerge
======
Инструмент для создания спрайтов CSS.
# Возможности
* Высокая производительность
* Поддержка background-repeat, background-size и даже background-position со значениями left, right, top и bottom за исключением center
* Настройка расстояний между изображениями в спрайтах
* Настройка параметров слияния
* Поддержка хака IE6, то есть объявление начинается с `_`
## План
* Поддержка нескольких форматов изображений. В настоящее время поддерживаются только PNG.
* Автоматическое создание спрайтовых изображений при отсутствии настроек слияния, например, при обнаружении конфликтов.
# Установка
```js
npm install -g imerge
Перед использованием этого инструмента вам необходимо настроить параметры слияния в файлах CSS. Просто добавьте merge: значение
в блок CSS, содержащий объявления background или background-image. Например:
div {
background: url('путь/к/изображению.png');
merge: sprite;
}
Затем выполните
imerge источник назначение [опции]
Это сгенерирует файлы CSS и спрайты в директорию назначение
.
Файл CSS:
div {
background: url('путь/к/spirit_sprite.png');
background-position: 0px 0px;
}
Изображение спрайта названо spirit_sprite.png
.
Параметры:
``` -h, --help вывод справочной информации о способах использования
-V, --version вывод номера версии
-p, --pattern [шаблон] шаблон для выбора файлов CSS
-d, --default-padding [значение] установка значения дефолтного отступа
-a, --all обработка всех фоновых изображений
-w, --webroot [путь] установка пути корневой директории сайта. По умолчанию: путь источника. Устарел, используйте --source-context.
-c, --css-to [путь] путь для выходных файлов CSS. Приоритет выше, чем у назначения
-s, --sprite-to [путь] путь для выходных файлов спрайтов. Приоритет выше, чем у назначения
-e, --source-context [путь] корневая директория для исходных файлов
-t, --output-context [путь] корневая директория для выходных файлов
```# Тестирование
Используйте Mocha как фреймворк для юнит-тестирования.
```js
npm install -g mocha
// перейти в директорию проекта
mocha -w --compilers coffee:coffee-script --recursive
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )