Скоро ухожу служить родине. Но перед этим захотелось закончить несколько дел и одно из них - это поделиться своим сборщиком.

lightBEM

сборщик ресурсов для веб-разработки

Описание

Сборщик ориентирован на разработку проектов с использованием методологии БЭМ, но его также можно использовать как сборщик блоков (модулей), организованных вне рамок методологии.

Возможности

• Сборка стилей (используется препроцессор Stylus и Autoprefixer)
• Сборка JS файлов
• Сборка спрайтов (в том числе и из svg)

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

Данный сборщик показал своё удобство внедрения при разработки на Yii и Joomla. Основным его преимуществом является простота использования.

Установка

• установить nodejs
• установить gulp
• скопировать репозиторий git clone https://github.com/belozyorcev/lightBEM.git
• запустить команду npm i для установки всех зависимостей
• запустить команду gulp в директории проекта

  Сруктура блока

Все блоки, будь то библиотека или модуль на файловой системе оформляются по следующиму правилу:

{blockName}/{blockName}.{js, styl}

например:

lightBEM/blocks/page/page.styl

или для библиотек

lightBEM/libs/vars/vars.styl

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

Сборка проекта происходит на основе файла builder.json расположенного в директории lightBEM/ Пример builder.json

{
    "libs": [
        "spriteHelper",
        "sprite"
    ],


    "pages": {
        "site": [
            "block1",
            "block2"
        ],
        "site_index": [
            "block1"
        ],
        "site_about": [
            "block1"
        ]
    }
}

Данный файл указывает сборщику, какие блоки необходимо собрать для проекта.

в разделе libs идёт перечень библиотек, которые подключаются перед сборкой основных стилей. В качестве библиотек могут выступать различные хэлперы, миксины, переменные и т.д.

В разделе pages указаны конечные страницы, для которых будет производиться сборка.

Например секция site создаст конечный файлы css/site.css и js/site.js в который войдут блоки block1 и block2 из директории lightBEM/blocks/

Переопределения (или локальные блоки для страниц)

По-умолчанию файлы блоков берутся из директории lightBEM/blocks/, но сборщик позволяет переопределять блоки для разных страниц. Блоки отдельных страниц лежат в директории lightBEM/pages/{pageName}/.

Например: Если в категории lightBEM/pages/site/ разместить блок block1 то он переопределит/доопределит блок из категории lightBEM/blocks/ (если он в ней имеется, иначе будет использован только локальный блок).

Работа со спрайтами

Изображения для спрайтов располагаются в директории lightBEM/images/4sprite/. Из этих файлов формируется спрайт, который располагаются по адресу images/sprite.png. А карта спрайта сохряняется в библиотеке lightBEM/libs/sprite/. В файл lightBEM/libs/sprite/sprite.styl записываются переменные, которые являются названиями файлов из директории lightBEM/images/4sprite/ с добавлением префикса s-. Далее в блоках их можно использовать путём вызова миксина sprite($s-image-name). Например, если в дирректорию lightBEM/images/4sprite/ положить файл arrow_up.png, то его параметры можно получить путём вызова sprite($s-arrow_up).

Пример:

блок arrow

.arrow
{
    sprite($s-arrow_up)
    display: inline-block
}

сгенерирует

.arrow
{
    width: 30px;
    height: 20px;
    background-position: 0px 0px;
    background-image: url(../images/sprite.png);
    display: inline-block;
}

Сборщик позволяет использовать векторный формат изображений SVG. Данные файлы хранятся в директории lightBEM/images/svg4sprite/, которые при сборке конвертируются в формат PNG и сохраняются в директории lightBEM/images/4sprite/. После конвертации происходит пересборка спрайта.

В планах на будущее

• добавление зависимостей для блоков
• оптимизации сборки
• добавление гибкости в настройки проекта