Не нашел в bem-tools/bem-bl/borschik возможность для сборки спрайтов css.
Хочу попробовать написать такую штуку, чтобы лучше разобраться в архитектуре фреймворка и принести какую-нибудь пользу.
Расскажите, если попытаться вообразить и реализовать такой инструмент:
* в каком виде его лучше себе представить (как расширение существующей технологии для сборки css в bem-tools, или borschik, или расширение существующей технологии, или как-то иначе?),
* каким образом он будет интегрироваться в сборочную архитектуру bem make/bem server, для учета всех зависимостей?
* каков механизм для подключения к проекту?
* какие компоненты и библиотеки фреймворка можно ре-использовать для реализации (например, есть-ли возможность для работы внутри процесса сборки с объектным представлением для css, или придется работать на уровне строк)?
Картинки - не совсем текст, но склеивание - да, это к борщику.
Я то думал, что борщик для сборки исходных файлов в релизные
благодарю за правильные за вопросы.
сборка спрайтов это процесс упаковки иллюстраций из большего множества, в меньшее множество файлов, целью минимизации количества запросов к серверу при загрузке страницы.
задача инструмента - автоматизировать муторную работу верстальщика, связанную со сборкой спрайтов и их последующей поддержкой.
навскидку, у задачи видятся следующие аспекты (и соответствующие им инструменты, которыми можно будет воспользоваться):
* конфигурация (определить, из каких именно исходных файлов собирать, и какое множество спрайтов),
* проверка формальных ограничений для использования спрайта внутри css-стиля (наличие в стиле background repeat-?, background position с и без url (вдруг уже спрайт), multiple backgrounds, height или width элемента больше размера изображения).
* выбор способа раскладки иллюстраций внутри спрайта (https://github.com/twolfson/layout),
* отрисовка спрайта (https://github.com/learnboost/node-canvas, https://github.com/aheckmann/gm)
* модификация css (замена ссылок на исходные файлы ссылками на спрайты, с указанием их позиций)
* интеграция в технологию сборки верстки (grunt, bem make)
* что пропустил?
существует масса подобных проектов, с различными подходами к её решению:
https://github.com/iAdramelk/grunt-oversprite
https://npmjs.org/package/tailor
https://npmjs.org/package/node-sprite
https://npmjs.org/package/sprightly
https://npmjs.org/package/spriteasy
https://npmjs.org/package/spriter
https://npmjs.org/package/spritesmith
https://npmjs.org/package/stylus-sprite
...
Отличный повод наконец-то перенести спецификацию с бумаги в цифровой вид!
Мы уже в целом ответили на все заданные вопросы, более-менее продумали архитектуру и API. Осталось только лишь (ха-ха) написать код
Подробности напишу чуть позже, когда разберусь в собственных каракулях и вспомню, о чём мы договорились, когда это придумывали.