Skip to content

Latest commit

 

History

History
128 lines (98 loc) · 6.31 KB

build-page.ru.md

File metadata and controls

128 lines (98 loc) · 6.31 KB

Сборка страницы

Страница — это частный случай бандла. Для сборки страницы также нужны список БЭМ-сущностей и уровни с исходным кодом блоков.

Как собирать бандлы, читайте в разделе Сборка бандла.

Основное отличие заключается в том, что страницы принято описывать в формате BEMJSON, а BEMDECL получать автоматически.

Пример BEMJSON-файла:

module.exports = {
    block: 'page',
    content: 'Hello BEM!'
};

Пример сборки страницы

Сборка страницы рассмотрена на примере проекта:

.enb/
└── make.js          # ENB-конфиг
blocks/              # уровень блоков
├── input/
    ├── input.deps.js
    ├── input.bemhtml
    ├── input.css
    └── input.js
├── button/
    ├── button.deps.js
    ├── button.bemhtml
    ├── button.css
    └── button.js
└── checkbox/
    ├── checkbox.deps.js
    ├── checkbox.bemhtml
    ├── checkbox.css
    └── checkbox.js
page/
└── page.bemjson.js  # описание страницы

Для сборки страницы необходимо выполнить следующие шаги:

  1. Получить список исходных файлов, которые будут участвовать в сборке (для css и js)

    Для этого нам понадобится:

    a. Просканировать уровни и узнать, какие БЭМ-сущности существуют в проекте.

    b. Прочитать BEMJSON-файл.

    c. Составить список БЭМ-сущностей по BEMJSON-файлу (b).

    d. Дополнить и упорядочить список БЭМ-сущностей (c) на основе информации о зависимостях (input.deps.js, button.deps.js и checkbox.deps.js) между БЭМ-сущностями (a).

    e. Получить упорядоченный список файлов по упорядоченному списку БЭМ-сущностей (c), а также по интроспекции уровней (a).

  2. Воспользоваться технологиями для сборки css и js.

  3. Собрать код шаблонов (BEMHTML или BH) и применить его к BEMJSON-файлу, чтобы получить HTML-файл.

  4. Объявить таргеты.

    ENB-конфиг (.enb/make.js) будет выглядить следующим образом:

    // Подключаем модули технологий
var techs = require('enb-bem-techs'),
    provide = require('enb/techs/file-provider'),
    bemhtml = require('enb-bemxjst/techs/bemhtml'), // npm install --save-dev enb-bemxjst
    html = require('enb-bemxjst/techs/bemjson-to-html'),
    css = require('enb-css/techs/css'), // npm install --save-dev enb-css
    js = require('enb-js/techs/browser-js'); // npm install --save-dev enb-js

module.exports = function(config) {
    // Настраиваем сборку бандла
    config.node('page', function(nodeConfig) {
        // Декларируем модули технологий,
        // которые могут учавствовать в сборке таргетов.
        nodeConfig.addTechs([
            // Используем базовые технологии, чтобы получить
            // список файлов, которые будут учавствовать в сборке.
            [techs.levels, { levels: ['blocks'] }],   // (1) -> `?.levels`
            [provide, { target: '?.bemjson.js' }],    // (2) -> `?.bemjson.js`
            [techs.bemjsonToBemdecl],                 // (3) -> `?.bemdecl.js`
            [techs.deps],                             // (4) `?.bemdecl.js` -> `?.deps.js`
            [techs.files],                            // (5) `?.levels` + `?.deps.js` -> `?.files`

            // Технологии принимают на вход список файлов. Таргет, в котором хранится список файлов,
            // задается опцией `filesTarget` (по умолчанию — `?.files`). Для сборки будут
            // использоваться только файлы, суффиксы которых указаны опцией `sourceSuffixes`.
            [css],     // Опция `sourceSuffixes` по умолчанию равна `['css']`
            [js, { target: '?.js' }],      // Опция `sourceSuffixes` по умолчанию равна `['vanilla.js', 'js', 'browser.js']`
            [bemhtml], // Опция `sourceSuffixes` по умолчанию равна `['bemhtml', 'bemhtml.xjst']`.

            // Технология принимает на вход `?.bemjson.js` и `?.bemhtml.js` таргеты.
            [html]
        ]);

        // Объявляем таргеты, которые хотим собрать.
        nodeConfig.addTargets(['?.css', '?.js', '?.html']);
    });
};

  5. Запустить сборку в консоли:

    $ enb make

  6. Проверить результат.

    После сборки в директории page будут созданы page.css, page.js и page.html, а также служебные файлы.

    .enb/
blocks/
page/
├── page.bemjson.js
    ...
├── page.html
├── page.css
└── page.js