Сборка дистрибутива

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

dist/
├── desktop/
├── touch-phone/
└── touch-pad/

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

Пример сборки дистрибутива

Проект состоит из трех платформ:

• desktop — включает уровни common.blocks и desktop.blocks;

• touch-phone — включает уровни common.blocks, touch.blocks и touch-phone.blocks;

• touch-pad — включает уровни common.blocks, touch.blocks и touch-pad.blocks.

Файловая система проекта:

.enb/
└── make.js          # ENB-конфиг
common.blocks/       # общий уровень
desktop.blocks/      # уровень для десктопов
touch.blocks/        # общий уровень для тачей
touch-phone.blocks/  # уровень для тач-падов
touch-pad.blocks/    # уровень для тач-фонов

Чтобы собрать дистрибутив из css и js для каждой платформы необходимо:

• Просканировать уровни платформы и узнать, какие БЭМ-сущности существуют в проекте.

• Сформировать BEMDECL-файл из всех БЭМ-сущностей, найденных в уровнях платформы (1).

• Упорядочить список БЭМ-сущностей.

• Получить упорядоченный список файлов по упорядоченному списку БЭМ-сущностей (3).

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

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

  var techs = require('enb-bem-techs'),
      css = require('enb/techs/css'),
      js = require('enb/techs/js'),
      levels = {
          'desktop': ['common.blocks', 'desktop.blocks'],
          'touch-phone': ['common.blocks', 'touch.blocks', 'touch-phone.blocks'],
          'touch-pad': ['common.blocks', 'touch.blocks', 'touch-pad.blocks']
      },
      platforms = Object.keys(levels);
  
  module.exports = function (config) {
      platforms.forEach(function(platform) {
          var node = path.join('dist', platform);
  
          // Настраиваем сборку дистрибутива для конкретной платформы.
          // Метод `config.node` создаст директорию `dist/platform-name`,
          // если ее еще не существует.
          config.node(node, function(nodeConfig) {
              nodeConfig.addTechs([
                  [techs.levels, {
                      levels: levels[platform]  // (1) -> `?.levels`
                  }],
                  [techs.levelsToBemdecl],      // (2) `?.levels` -> `?.bemdecl.js`
                  [techs.deps],                 // (3) `?.bemdecl.js` -> `?.deps.js`
                  [techs.files],                // (4) `?.levels` + `?.deps.js` -> `?.files`
  
                  [css],
                  [js]
              ]);
  
              nodeConfig.addTargets(['?.css', '?.js']);
          }
      }
  };
  

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

  $ enb make
  

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

  После сборки будет создана директория dist с поставками проекта по платформам. Для каждой платформы будет создана директория, содержащая в себе css и js, а также служебные файлы.

  .enb/
  common.blocks/
  desktop.blocks/
  touch.blocks/
  touch-phone.blocks/
  touch-pad.blocks/
  dist/
  ├── desktop/
          ...
      ├── desktop.css
      └── desktop.js
  ├── touch-phone/
          ...
      ├── touch-phone.css
      └── touch-phone.js
  └── touch-pad/
          ...
      ├── touch-pad.css
      └── touch-pad.js
  

Аналогично можно собрать другие необходимые бандлы, например, включающие в себя шаблоны.