Пакет для сборки проектов, в основе которых лежит БЭМ-методология.
$ npm install --save-dev enb-bem-techs
Для работы модуля требуется зависимость от пакета enb
версии 0.13.0
или выше.
БЭМ-методология предпологает разделение интерфейса на независимые блоки.
blocks/
├── head/
├── footer/
├── logo/
├── button/
└── link/
Каждый блок может быть реализован в одной или нескольких технологиях.
button/
├── button.css
└── button.js
Если в блоках есть элементы или модификаторы, которые используются не всегда, их реализация выносится в отдельные файлы.
button/
├── __text/
│ ├── button__text.css
│ └── button__text.js
├── _focused/
│ ├── button_focused.css
│ └── button_focused.js
├── _type/
│ ├── button_type_link.css
│ └── button_type_link.js
├── button.css
└── button.js
В проекте может быть несколько уровней с блоками, например, для разделения кода по платформам.
src/
├── common.blocks/
│ ├── button/
│ └── link/
├── desktop.blocks/
│ └── button/
└── touch.blocks/
└── link/
Примеры из жизни:
Подробнее об организации БЭМ-проектов в файловой системе читайте в разделе методология на сайте bem.info.
Воспользуйтесь инструкцией по установке project-stub, чтобы создать БЭМ-проект, настроенный для сборки с помощью ENB.
Для создания проекта, подходящего под ваши задачи, ответьте на вопросы генератора БЭМ-проектов, основанного на Yeoman.
- levels
- levels-to-bemdecl
- provide-bemdecl
- deps-by-tech-to-bemdecl
- bemjson-to-bemdecl
- merge-bemdecl
- deps
- deps-old
- provide-deps
- merge-deps
- subtract-deps
- files
Собирает информацию об уровнях переопределения проекта и предоставляет ?.levels
. Результат выполнения этой технологии необходим следующим технологиям:
enb-bem-techs/techs/deps
enb-bem-techs/techs/deps-old
enb-bem-techs/techs/files
Опции
- String target — результирующий таргет. По умолчанию —
?.levels
. - (String|Object)[] levels — уровни переопределения. Полные пути к папкам с уровнями переопределения.
Вместо строки с путем к уровню может использоваться объект вида
{path: '/home/user/www/proj/lego/blocks-desktop', check: false}
для того, чтобы закэшировать содержимое тех уровней переопределения, которые не модифицируются в рамках проекта.
Пример
nodeConfig.addTech([require('enb-bem-techs/techs/levels'), {
levels: [
{path: 'lego/blocks-desktop', check: false},
'desktop.blocks'
].map(function (level) {
return config.resolvePath(level);
})
}]);
Формирует BEMDECL, состоящий из всех сущностей, найденных на уровнях.
Опции
- String target — результирующий BEMDECL-таргет. По умолчанию —
?.bemdecl.js
. - String levelsTarget — исходный
levels
. По умолчанию —?.levels
.
Пример
nodeConfig.addTech(require('enb-bem-techs/techs/levels-to-bemdecl'));
Копирует BEMDECL в текущую ноду под нужным именем из другой ноды. Может понадобиться, например, для объединения BEMDECL'ов.
Опции
- String node — путь исходной ноды с нужным BEMDECL'ом. Обязательная опция.
- String source — исходный BEMDECL, который будет копироваться. По умолчанию —
?.bemdecl.js
(демаскируется в рамках исходной ноды). - String target — результирующий BEMDECL-таргет. По умолчанию —
?.bemdecl.js
(демаскируется в рамках текущей ноды).
Пример
nodeConfig.addTech([require('enb-bem-techs/techs/provide-bemdecl'), {
node: 'bundles/router',
source: 'router.bemdecl.js',
target: 'router.bemdecl.js'
}]);
Формирует BEMDECL на основе depsByTech
-информации из ?.deps.js
.
Опции
- String sourceTech — имя исходной технологии. Обязательная опция.
- String destTech — имя конечной технологии. Обязательная опция.
- String filesTarget —
files
-таргет, на основе которого получается список исходных файлов (его предоставляет технологияfiles
). По умолчанию —?.files
. - String sourceSuffixes — суффиксы файлов, по которым строится
files
-таргет. По умолчанию —'deps.js'
. - String target — результирующий BEMDECL-таргет. По умолчанию —
?.bemdecl.js
.
Пример
nodeConfig.addTech(require('enb-bem-techs/techs/deps-by-tech-to-bemdecl'), {
sourceTech: 'js',
destTech: 'bemhtml'
});
Формирует BEMDECL на основе ?.bemjson.js
.
Опции
- String source — исходный BEMJSON-таргет. По умолчанию —
?.bemjson.js
. - String target — результирующий BEMDECL-таргет. По умолчанию —
?.bemdecl.js
.
Пример
nodeConfig.addTech(require('enb-bem-techs/techs/bemdecl-from-bemjson'));
Формирует BEMDECL с помощью объединения других BEMDECL-файлов.
Опции
- String[] sources — исходные BEMDECL-таргеты. Обязательная опция.
- String target — результирующий BEMDECL-таргет. По умолчанию —
?.bemdecl.js
.
Пример
nodeConfig.addTech([require('enb-bem-techs/techs/merge-bemdecl'), {
sources: ['search.bemdecl.js', 'router.bemdecl.js'],
target: 'all.bemdecl.js'
}]);
Раскрывает зависимости. Сохраняет в виде ?.deps.js
.
Опции
- String bemdeclFile — файл с исходными зависимостями. По умолчанию —
?.bemdecl.js
. - String levelsTarget — исходный
levels
. По умолчанию —?.levels
. - String target — результирующий
deps
. По умолчанию —?.deps.js
.
Пример
Обычное использование:
nodeConfig.addTech(require('enb-bem-techs/techs/deps'));
Сборка специфического deps
:
nodeConfig.addTech([require('enb-bem-techs/techs/deps'), {
sourceDepsFile: 'search.bemdecl.js',
target: 'search.deps.js'
}]);
Раскрывает зависимости. Сохраняет в виде ?.deps.js
. Использует алгоритм, заимствованный из bem-tools.
Опции
- String bemdeclFile — файл с исходными зависимостями. По умолчанию —
?.bemdecl.js
. - String levelsTarget — исходный
levels
. По умолчанию —?.levels
. - String target — результирующий
deps
. По умолчанию —?.deps.js
.
Пример
Обычное использование:
nodeConfig.addTech(require('enb-bem-techs/techs/deps-old'));
Сборка специфического deps
:
nodeConfig.addTech([require('enb-bem-techs/techs/deps-old'), {
sourceDepsFile: 'search.bemdecl.js',
target: 'search.deps.js'
}]);
Копирует deps
в текущую ноду под нужным именем из другой ноды.
Может понадобиться, например, для объединения deps
'ов.
Опции
- String node — путь исходной ноды с нужным
deps
'ом. Обязательная опция. - String source — исходный
deps
, который будет копироваться. По умолчанию —?.deps.js
(демаскируется в рамках исходной ноды). - String target — результирующий
deps
-таргет. По умолчанию —?.deps.js
(демаскируется в рамках текущей ноды).
Пример
nodeConfig.addTech([require('enb-bem-techs/techs/provide-deps'), {
node: 'bundles/router',
source: 'router.deps.js',
target: 'router.deps.js'
}]);
Формирует deps
с помощью объединения других deps
-файлов.
Опции
- String[] sources — исходные
deps
-таргеты. Обязательная опция. - String target — результирующий
deps
-таргет. По умолчанию —?.deps.js
.
Пример
nodeConfig.addTech([require('enb-bem-techs/techs/merge-deps'), {
sources: ['search.deps.js', 'router.deps.js'],
target: 'all.deps.js'
}]);
Формирует deps
с помощью вычитания одного deps
-файла из другого.
Может применяться в паре с provide-deps
для получения deps
для bembundle
.
Опции
- String from — таргет, из которого вычитать. Обязательная опция.
- String what — таргет, который вычитать. Обязательная опция.
- String target — результирующий
deps
-таргет. По умолчанию —?.deps.js
.
Пример
nodeConfig.addTechs([
[require('enb-bem-techs/techs/deps'), { target: 'router.tmp.deps.js' }],
[require('enb-bem-techs/techs/provide-deps'), {
node: 'pages/index',
target: 'index.deps.js'
}],
[require('enb-bem-techs/techs/subtract-deps'), {
what: 'index.deps.js',
from: 'router.tmp.deps.js',
target: 'router.deps.js'
}]
]);
Собирает список исходных файлов для сборки на основе deps
и levels
, предоставляет ?.files
и ?.dirs
.
Используется многими технологиями, которые объединяют множество файлов из различных уровней переопределения в один.
Опции
- String depsFile — исходный
deps
-таргет. По умолчанию —?.deps.js
. - String levelsTarget — исходный
levels
. По умолчанию —?.levels
. - String filesTarget — результирующий
files
-таргет. По умолчанию —?.files
. - String dirsTarget — результирующий
dirs
-таргет. По умолчанию —?.dirs
.
Пример
nodeConfig.addTech(require('enb-bem-techs/techs/files'));