1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/javey-imerge

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
В этом репозитории не указан файл с открытой лицензией (LICENSE). При использовании обратитесь к конкретному описанию проекта и его зависимостям в коде.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

imerge

Инструмент для объединения CSS-спрайтов

Основные характеристики

  • Высокопроизводительный, простой в использовании
  • Поддерживает background-repeat, background-size и значения background-position равные left/right/top/bottom (значения center и проценты % не поддерживаются)
  • Поддерживает отступы внутри спрайта для маленьких изображений
  • Поддерживает конфигурацию спрайтов, позволяющую указывать, какие изображения должны объединяться вместе
  • Поддерживает синтаксис для совместимости с IE6, используя "underline" перед объявлением

Планы развития

  • Поддержка нескольких форматов изображений, в настоящее время поддерживаются только PNG
  • Автоматическое объединение изображений при отсутствии пользовательской конфигурации. Например, механизм обнаружения конфликтов.

Установка

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
    }
}

pathFilter

{
    // Фильтр пути к изображению
    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 )

Вы можете оставить комментарий после Вход в систему

Введение

Инструмент для создания CSS-спрайтов. Развернуть Свернуть
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/javey-imerge.git
git@api.gitlife.ru:oschina-mirror/javey-imerge.git
oschina-mirror
javey-imerge
javey-imerge
master