Giters

innabelaya / enb-bem-techs

ENB package to build BEM-projects

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

enb-bem-techs

NPM version Build Status Coverage Status Dependency Status

Пакет для сборки проектов, в основе которых лежит БЭМ-методология.

Установка

$ 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. Результат выполнения этой технологии необходим следующим технологиям:

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

levels-to-bemdecl

Формирует BEMDECL, состоящий из всех сущностей, найденных на уровнях.

Опции

  • String target — результирующий BEMDECL-таргет. По умолчанию — ?.bemdecl.js.
  • String levelsTarget — исходный levels. По умолчанию — ?.levels.

Пример

nodeConfig.addTech(require('enb-bem-techs/techs/levels-to-bemdecl'));

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

deps-by-tech-to-bemdecl

Формирует 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'
});

bemjson-to-bemdecl

Формирует BEMDECL на основе ?.bemjson.js.

Опции

  • String source — исходный BEMJSON-таргет. По умолчанию — ?.bemjson.js.
  • String target — результирующий BEMDECL-таргет. По умолчанию — ?.bemdecl.js.

Пример

nodeConfig.addTech(require('enb-bem-techs/techs/bemdecl-from-bemjson'));

merge-bemdecl

Формирует 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

Раскрывает зависимости. Сохраняет в виде ?.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-old

Раскрывает зависимости. Сохраняет в виде ?.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'
}]);

provide-deps

Копирует 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'
}]);

merge-deps

Формирует 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'
}]);

subtract-deps

Формирует 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'
    }]
]);

files

Собирает список исходных файлов для сборки на основе 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'));

About

ENB package to build BEM-projects

License:MIT License

Languages

Language:JavaScript 100.0%