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

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

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

Основное отличие заключается в том, что страницы принято описывать в формате 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  # описание страницы

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

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

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

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

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

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

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

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

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

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

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

  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']);
      });
  };
  

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

  $ enb make
  

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

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

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