Использование bem-tools для создания блоков

[DjonyBastone]

Клонирован шаблонный репозиторий - Project-stub, установлен ym

Команда - $ bem create desktop.bundles/page/page.bemjson.js создает пустой page.bemjson.js. В readme Project-stub говорится о начальном заполнении содержимым.

Как bem-tools дать понять, что необходимо *.bemjson.js заполнить содержимым, и где это содержимое найти?

[tadatuta]

Страница на bem.info чуть отстала от актуального содержимого readme в репозитории: https://github.com/bem/project-stub/blob/master/README.ru.md#Создание-страницы (сейчас там предлагается создать содержимое вручную, но можно добавить шаблон для bemjson.js вручную, см. https://github.com/bem-tools/bem-tools-create/blob/master/README.ru.md#Шаблоны-технологий)

[ilyar]

Добавил шаблон для bemjson.js, но что-то пошло не так:

bem create -l desktop.bundles -b contact # создает технологии по умолчанию, хотя для уровня задана только bemjson.js
bem create -l desktop.bundles -b contact -T bemjson.js # ожидаемый результат

[tadatuta]

@ilyar у тебя актуальная версия bem-tools-create (нужна 2.0.0)? до этого был баг, который может так проявляться.

[DjonyBastone]

@ilyar, @tadatuta Спасибо

У меня снова вопросы про сборку, теперь Gulp. Конечно не про bem-tools, но ветки не хотелось бы плодить.

• Если классы (для button к примеру - focused , hovered , pressed) добавляются в DOM-дереве средством JS, а сборщик и его плагины знают только то - что задекларировано.

1) Инструменты типа gulp-uncss, который удаляет в CSS не применяемые классы в html - соответственно не подходит? 2) Существует ли возможность для таких инструментов, указать применяемые классы, если они инициируются допустим i-bem? К примеру спарсил html, потом спарсил из i-bem классы (по сущностям из html), а затем только взялся удалять не нужный CSS. 3) Или я перемудрил? просто в js вообще не понимаю, изучаю его - как говориться "в поле"

[tadatuta]

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

Если классы (для button к примеру - focused , hovered , pressed) добавляются в DOM-дереве средством JS, а сборщик и его плагины знают только то - что задекларировано.

Если я правильно понял вопрос, то решается это через технологию deps.js: теория, практика.

Инструменты типа gulp-uncss, который удаляет в CSS не применяемые классы в html - соответственно не подходит? Существует ли возможность для таких инструментов, указать применяемые классы, если они инициируются допустим i-bem? К примеру спарсил html, потом спарсил из i-bem классы (по сущностям из html), а затем только взялся удалять не нужный CSS. Или я перемудрил? просто в js вообще не понимаю, изучаю его - как говориться "в поле"

В ответе на этот вопрос нет ничего БЭМ-специфичного: если вся разметка доступна заранее, то uncss можно смело использовать, если же часть разметки генерируется в рантайме, то могут быть проблемы. Как по мне, использования CSSO (он поставляется из коробки) должно быть достаточно. Собственно, откуда ожидается получить лишние стили? Может стоит побороться с их источником, чем с последствиями?

[DjonyBastone]

Лишнее из файлика *post.css, там появилось путем копипаста темы islands, для кастомизации.

CSSO в gulpfile прописан, но лишнее тянется всё равно... Пойду разбираться с CSSO

[tadatuta]

Так а чего не удалить лишнее сразу прямо из кода?

[DjonyBastone]

так и сделал...

Но что-то мне подсказывает - надо автоматизировать процесс. Выборочно планируется копировать дизайн из islands.

[ilyar]

@tadatuta по зависимостям из project-stub приехало bem-tools-create@1.1.0:

node v6.9.2 
npm 4.1.1
rm -fr node_modules
npm cach clean
npm i
npm ll | grep bem-tools
│ │ git://github.com/bem-tools/bem-tools.git
│ │ https://bem.info/toolbox/bem-tools/
│ ├─┬ bem-tools-core@0.0.3
│ │ │ bem-tools-core is a CLI runner for its plugins
│ └─┬ bem-tools-create@1.1.0
│   │ │ Config module for bem-tools
│ │ │   Config module for bem-tools

решение:

 npm i bem-tools-create --save-dev

 npm ll | grep bem-tools
│ │ git://github.com/bem-tools/bem-tools.git
│ │ https://bem.info/toolbox/bem-tools/
│ ├─┬ bem-tools-core@0.0.3
│ │ │ bem-tools-core is a CLI runner for its plugins
│ └─┬ bem-tools-create@1.1.0
│   │   Config module for bem-tools
├─┬ bem-tools-create@2.0.0
│ │ │ Config module for bem-tools
│ │ │   Config module for bem-tools

bem create -l desktop.bundles -b contact # ожидаемый результат

Оставил решение тут https://github.com/bem/project-stub/pull/223 слияние не ожидаю, но если это окажется полезно, говорите, что надо поправить, я сделаю.

[tadatuta]

@ilyar на самом деле я готов влить хоть сейчас, но было бы круто избавиться от спейсов перед двоеточиями в объектах (это расходится с bem-core/bem-components, но, вроде, соответствует тому, как пишет большинство пользователей)

[ilyar]

Сделал.

Я пытался, но не понял значение опций root и home в .bemrc, есть дополнительные пояснения, кроме bem-sdk/bem-config?

[tadatuta]

Влил, спасибо большое!

bem-config ищет все .bemrc вверх по файловой системе + в хомке (по умолчанию ~, но можно переопределить через fsHome). Флаг root позволяет остановить всплытие, указав, что корневая директория достигнута. Если не найдется конфиг с флагом root: true, то всплытие будет продолжаться до / (можно переопределить с помощью fsRoot).