Существует ли (рассматривается ли) способ организации блоков в рамках одного уровня переопреледния?

Как пример можно рассматривать ситуацию, когда имеется некоторая (предположим) сущность "Report" и все имеющие к ней отношение блоки удобно было бы хранить в одной папке. Поначалу пытался для таких ситуаций использовать отдельные уровни (создаём уровень blocks/Report, в котором храним всё, имеющее отношение к "Report"), но это получается как-то вне концепции и вообще дичь.

Т.е.: возможна ли не плоская, а древовидная структура папок для блоков внутри уровня?

Может я еще какие то базовые вещи не изучил, но все же пытаюсь что то сделать по бэм. И не получается заюзать bem create. Может быть я плохо читал документацию, но я не нашел там "как" пользоваться этой командой, я прочитал много об этой команде, какие ключи можно использовать, что они создают и. т. д.

Но так и не нашел как пользоваться то ? На каком уровне переопределения вводить эту команду, да там написанно, что можно назначить какие то уровни переопределения в каком то файле, но вот как эта команда работает по умолчанию так и не нашел.

Как только начал читать документацию, увидел "bem create my-block" думаю вот как все просто то, но не тут то было, команда не завелась, уточнения про то, что нужно писать как то так "./node_modules/.bin/bem create -l desktop.blocks -b layout -T css" ни где в доках не нашел, только в чате телеграмм и в комментариях на гитхабе.

Собственно вопрос. Знаю, что можно не писать этот длинный путь, а просто указать "bem create my-block". Для этого посоветовали в файле .bashrc написать вот это "export PATH=./node_modules/.bin:$PATH" Но строчка "bem create my-block" в консоли не сработала =( В чем может быть причина ?

Подскажите как сделать так, чтобы по файлу BEMJSON папки и файлы(стилей скриптов и др) создавались сами.

Вроде бы с помощью БЭМ тулс говорили можно, прочитал, но как это сделать ответа не нашел.

P.S. Чтобы подключить bem-tools нужно на уровне проекта прописать npm install bem верно ? или просто в терминале это прописать? Куда он тогда установится

P.P.S. В документации к тулзу написанно, что можно создавать для БЭМ сущностей css, js файлы, а так же bemhtml. Нужно ли это делать или bemhtml идет один на бандл(страницу).

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

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

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

Привет всем! Начал разбираться с bem-config. Крутецкая, между прочим, штуковина! Жаль, только примеров использования крайне мало. Хотелось бы узнать, как предполагается использовать секции libs и levels?

Здравствуйте. Разворачиваю bem-site-engine. https://github.com/bem-archive/bem-site-engine Столкнулся со следующе ошибкой: [2016-11-29 18:33:54] DEBUG app.app.node.js: app initialization [2016-11-29 18:33:54] DEBUG _type.provider_type_file.node.js: make directory backups/0 [2016-11-29 18:33:54] DEBUG _type.provider_type_file.node.js: copy file from backups/data.json to backups/0/data.json [2016-11-29 18:33:54] ERROR model.model.node.js: Error occur while loading model ENOENT: no such file or directory, stat 'backups/data.json' [2016-11-29 18:33:54] DEBUG app.app.node.js: starting server [2016-11-29 18:33:54] ERROR app.app.node.js: TypeError: Cannot read property 'redirects' of undefined

Верно ли я понимаю, что надо сделать snapshot? Если да, как его сделать? Спасибо.

При создании блока командой bem create -b block-name выдает сабж. NODE_PATH прописан, если что. В чем может быть дело?

Почему не создаются блоки командой $ bem create -l desktop.blocks/ -b block? Пишет-bash: bem: command not found

Добрый вечер!

Хочу собирать html на node.js сервере, используя следующий код:

var BEMHTML = require('./bundle/bundle.bemhtml.js').BEMHTML; var html = BEMHTML.apply(dataObject);

Где dataObject приходит такой: https://gist.github.com/philipusis/e98ea5bd6086d108e01adbc162cf26b9 Проблема в том, что для блока 'header' не применяется мой пользовательский шаблон, хотя в bundle.bemhtml.js он попадает: https://gist.github.com/philipusis/ef74ee8e1f63fb3300c83e5d6dfe58e0

HTML блока page генерируется нормально, т.е. библиотечные шаблоны работают нормально, а для header генерируется дефолтный

, который он берет из bemjson'а в dataObject. Полный код файла, который осуществляет сборку: https://github.com/philipusis/sixth-bem/blob/static_resources/render.js Допускаю, что где-то мог накосячить с конфигом для сборки, поэтому его можно посмотреть здесь: https://github.com/philipusis/sixth-bem/blob/static_resources/.enb/make.js

Подскажите, пожалуйста, что я забыл прописать?

Спасибо!

https://ru.bem.info/platform/tutorials/start-with-project-stub/#Создание-блока-1

Как и обещал, выпустил Pobem@v1.

Список изменений (от версии 0.3.2)

Убрано : в декларациях блоков

Было

:block(block)

Стало

block(block)

Более чистый синтаксис

Больше не нужно для "каскадных" деклараций блоков (block, elem, mod) использовать &. Плагин сам склеивает и разбивает где нужно.

Было

:block(block) {
  &:elem(elem) {}
  &:mod(mod val) {
    width: 100px;
    &:mod(active) {
      &:elem(elem5) {}
    }
  }
  &:elem(elem1) {}
  &:elem(elem3) {}
}

Стало

block(block) {
  elem(elem) {}
  mod(mod val) {
    width: 100px;
    mod(active) {
      elem(elem5) {}
    }
  }
  elem(elem1) {}
  elem(elem3) {}
}

Переименовал Pobems -> Pobem

Такое название прощё запоминается

Синтаксис в виде цепочек (по аналогии с BEMHTML/BEMTREE)

Было

:block(block):elem(elem):mod(mod val)

Стало

block(block).elem(elem).mod(mod val)

Также сохранено

В качестве разделителя между mod val могут служить:

• пробел -
• запятая - ,
• стрелка - ->

Названия блоков могут быть как в кавычках, так и без.

block(block).mod(mod val) === block('block').mod('mod', 'val')

репозиторий NPM репозиторий GitHub

Добрый день! Внимательно прочитал всю доступную документацию в старом виде и в новом, несколько статей, посмотрел несколько вебинаров и лекций. Но некоторые моменты всё равно ускользнули от моего внимания и понимания. В целом эта непонятная ситуация причиняет мне физический дискомфорт. Боюсь, что для понимания многих вещей, придется просмотреть много кода, что бы найти примеры использования, а это камень в огород документации. Без ответа на эти вопросы, я буду плавать в методологии и не смогу ей воспользоваться.

Из документации я не понял:

1. Шаблонизация в браузере когда и зачем нужна? Я предполагаю, что весь HTML будет собираться на сервере, в том числе, что динамично будет отправляться клиенту. Но, коль есть возможность компилировать в браузере, хотелось бы узнать о плюсах и кейсах, когда это может понадобиться. Что, касательно ресурсов, насколько это ресурсозатратно?

2. Возможность частичной сборки и компиляции со статичными html файлами Многие элементы интерфейса - статичные, например, шапка, меню, футер, общие лейауты. Собирать их отдельно для каждого клиента - бессмысленно. Возможно ли как-то объединять уже собранный, статичный HTML и динамичные блоки?

3. Документация про сборку Я прочитал весь раздел про enb, но там скорее кейсы, чем сама архитектура. Мне непонятно, как организовать сборку для проекта в целом.

4. Как организовать сборку для дева, прода, лайв В продолжение предыдущего вопроса - для разработки и для прода требуются разные настройки. Я правильно понимаю, что разные настройки обеспечиваются разными файлами по типу make.js ?

5. Документация про декларацию Я не нашел цельной информации про декларацию (?.bemdecl.js), и всё, что я про это знаю - частички из статей про enb, из-за этого складывается ощущение, что я чего-то не догоняю.

_6. Почему и зачем есть BEMHTML и bh, какой для каких ситуаций лучше _ Я долго пытался понять - что делает bh, пока не понял, что это - еще один шаблонизатор, такой же, как BEMHTML. Так в чём же разница, и как так получилось, что есть два шаблонизатора? Какой из них под какие цели заточен? И, кстати, про bh нет документации.

_7. Где доки про BEMTREE, когда что лучше использовать _ Про BEMTREE лишь сказано, что синтаксис "Такой же, как в BEMHTML, но только с двумя режимами", при всём при том, что это - важный и основной инструмент при сборке. Очень хотелось бы увидеть примеры и объяснения, как делать шаблоны для BEMTREE.

8. Доки про SASS|LESS| любые модули Основной инструмент библиотеки для css - stylus, по историческим причинам. Хотелось бы узнать, как можно использовать другие препроцессоры. Я часто встречал мнение, что БЭМ - навязывает свой стек. Я понимаю, что это не так, просто инструменты дефолтные такие. Хотелось бы узнать, как можно в сборку включать те, что соответствуют моему стеку.

9. Контроллеры для сборки, практики BEM - штука хорошая, но кажется очень замкнутой в себе из-за того, что до конца не ясен сам процесс сборки и связь с внешним миром. Во всех статьях и гайдах говорится в-основном о статичных сайтах. И из-за этого, совсем мне не понятно, как сделать динамичный сайт, как организовать динамичную и частичную сборку, роутинг и т. д.

10. Шапка, лейаут в общем html Возможно, мой мозг еще не переключился в БЭМ-область, но мне до конца не ясно, как сделать общие части интерфейса для всех страниц сайта - каждый раз подключать header, content, footer?

11. Подключение скриптов, стилей, других библиотек. Если подключение своих скриптов, всё худо-бедно понять можно, то как подключить скрипты библиотек? Их ведь нужно указать в head (а некоторые скрипты в футере). Как же это всё делается в рамках шаблонов, страниц? Хардкодить?

12. Какие практики бандлов Из документации мне совсем не понятно что такое и для чего нужны бандлы. Как я понял - это собранные пакеты css и js, но куда их нужно пихать и зачем - непонятно.

13. Борщик Для чего борщик существует внутри enb, ведь в enb есть другие инструменты, для работы с файлами. В чем его отличие и назначение?

Возможно, многие вопросы очевидные или неправильно сформулированы, про неправильное пользование той или иной технологией. Каждый из этих вопросов - для меня важный, прошу, если вы знаете ответ или имеете мнение хоть по одному из них - не стесняйтесь.

Всем привет!

Пишу проект с использованием bem. На бэкенде koa сервер, который в том числе и осуществляет сборку фронетенда. Для удобста разработки в dev окружении при рендере страницы происходит пересборка проекта с помощью enb/lib/api/make.js. Столкнулся с проблемой, что при изменении блоков и перезагрузки страницы пересборка запускается (и выполняется успешно), но отдается старая версия. Пробывал прибивать кэши BEMHTML и BEMTREE файлов:

delete require.cache[require.resolve(bemtreePath)];
delete require.cache[require.resolve(bemhtmlPath)];

, но это не помогло.

Пробывал прибивать кэш модуля рендера:

delete require.cache[__filename];

тоже ничего. Подскажите как это правильно сделать.

UPD: решил проблему! Проблема была в том, что я подгружал BEMHTML и BEMTREE файлы в САМОМ начале модуля и дроапал кэши в КОНЦЕ модуля, а в самом модуле была регистрация middleware. Когда перенес загрузку BEMHTML и BEMTREE в начало middleware и очистку кэша в конец middleware все заработаело

app.use(function *(next) {
      const BEMTREE = require(bemtreePath).BEMTREE;
      const BEMHTML = require(bemhtmlPath).BEMHTML;
     .....
       // remove require cache
      delete require.cache[require.resolve(bemtreePath)];
      delete require.cache[require.resolve(bemhtmlPath)];
})

Рассмотрим 3 случая merged-сборки проекта в режиме watch: 1 - изменение бандла (bemjson) 2 - изменение css, js шаблона 3 - изменение самого шаблона (bemhtml)

При изменении бандла все просто, запускается enb-make и далее все происходит автоматически. А вот как быть при 2 остальных случаях? Не хотелось бы пересобирать весь проект при изменении одного блока, который используется в 2 бандлах, к примеру, из 50.

Как вариант: можно проходиться по депсам бандлов, сравнивать с измененным и уже от этого исходить. Но может есть уже какое-то готовое решение? Заранее спасибо.

Пакет есть во всех либах. Нужен ли он как зависимость в моем проекте?

Добрый день.

1. Как можно настроить make.js, чтобы он в бандл: html файлы, css файлы и js файлы складывал в разные папки с группировкой по этим типам?
2. Не нашел, есть ли возможность штатными средствами прикрутить css препроцессор (sass/less) ?

Есть ли какая-нибудь опция? На всякий случай OS Windows 7

Вот в этом посте о результатах хакатона по инструментам сборки, Виталя упоминал созданный нами инструмент bem-tools-find.

Спешу сообщить, что мне удалось довести этот инструмент до того состояния в котором его не стыдно показать BEM сообществу.

• Написаны тесты
• Есть CI
• Есть достаточный объем документации по использованию этого инструмента

В конце концов выпущена версия 0.0.1 пакета bem-tools-find.

Пользуйтесь им на здоровье и не забывайте присылать ваши идеи и замечания.

12-13 декабря у нас был хакатон по разработке инструментов БЭМ. Я участвовал в команде переосмысления и разработки прототипа bem-tools, напишу, что у нас получилось.

В нашей команде было 6 человек:

• Вова Гриненко (ментор команды)
• Виталий Харисов
• Андрей Кузнецов
• Илья Исупов
• Ваня Воищев
• Миша Баранов

Решили, что bem-tools надо делать по архитектуре «минимальное ядро + плагины». Ядро не умеет ничего, кроме общей обвязки про CLI, поиска локально или глобально установленных пакетов bem-tools-something и запуска указанной пользователем команды.

Собственно, так и получилось. Весь код ядра умещается на один экран и, кажется, развивать тут дальше нечего.

Плагин предоставляет JS API, которое ничего не знает про CLI (файл index.js в корне) и CLI интерфейс (файл cli.js). Это позволяет рассматривать каждый плагин, как отдельный пакет, который можно использовать независимо от всех остальных.

Мы успели сделать минимальные версии bem-tools-init, bem-tools-make, bem-tools-create и bem-tools-find. А так же вспомогательные bem-fs-scheme и bem-config. Миша Баранов делал плагин для IntelliJ IDEA для создания БЭМ-сущностей из интерфейса IDE.

Как это обычно бывает после хакатона, всё в сыром состоянии, использовать в работе это всё пока нельзя, но зато можно успеть повлиять на API и помочь нам с доработками.

Обо всём этом ниже подробнее.

Скачиваем bem-tools:

npm i bem/bem-tools#WIP
bem

Если всё прошло успешно, после запуска bem увидим:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem [OPTIONS] [ARGS]


Options:
  -h, --help : Help
  -v, --version : Version

Установим команду init:

npm i bem-incubator/bem-tools-init

Запускаем ещё раз bem и видим, что появилась команда init:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem COMMAND [OPTIONS] [ARGS]
  bem [OPTIONS] [ARGS]

Commands:
  init : Init

Options:
  -h, --help : Help
  -v, --version : Version

Запуск bem init my-test-project создаст my-test-project и в ней файл bemconf.json с содержимым

{
   "root": true
}

Это маркер корня проекта, будет использоваться другими командами для поиска настроек проекта.

Для работы с конфигом сделали простую библиотеку bem-config (https://github.com/bem-incubator/bem-config/) и накидали примерную структуру файла конфигурации. Файл конфигурации ищется в текущей директории и выше до корня. Используется ближайший найденный, также к нему добавляется ~/.bemconf.json.

Хотим, чтобы команда init была более умной, например, могла помимо пустого проекта создать заготовку по шаблону. Как вариант, клонировала project-stub. Сейчас это пример минимального плагина, можно использовать его для написания своего.

Следующая не менее минималистичная команда — make:

npm i bem-incubator/bem-tools-make

Просто вызывает enb :)

Ещё мы сделали прототип команды create:

npm i bem-incubator/bem-tools-create

Она поддерживает, как «классический» синтаксис bem-tools:

bem create -b b1 -t css -t js -l .
bem create -b b2 -t css -t js -l .

так и более простой:

bem create {b1,b2}.{css,js}

Есть шаблоны для технологий по умолчанию. Можно задать свои в конфиге, получаемом через bem-config. Они могут быть локальными для уровня, для проекта или браться из конфига пользователя.

Для построения имён БЭМ-сущностей используется bem-naming, для путей на файловой системе — bem-fs-scheme (пока реализована только nested схема, но легко можно добавить другие). И то, и другое можно задать в файле конфигурации.

Есть ещё что доделывать, постепенно доработаем и выпустим в рамках bem-tools 2.0.

Андрей Кузнецов и Илья Исупов написали прототип команды find (https://github.com/bem-incubator/bem-tools-find/), которая позволяет искать БЭМ-сущности и показывать их в разном виде.

Например, нам нужно найти все файлы про модификатор type для блока input:

bem find -b input -m type
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

или то же самое, но в виде дерева:

bem find -b input -m type -v tree
tree
└─┬ /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks
  └─┬ input
    └─┬ _type
      ├─┬ password
      │ ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
      │ └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
      └─┬ search
        ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
        └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

Миша Баранов делал плагин для Intellij IDEA (WebStorm, PhpStorm, etc), который будет позволять создавать БЭМ-сущности из контекстного меню (https://github.com/bem-incubator/bem-tools-intellj-plugin).

Плагин предоставляет только интерфейсную обвязку для встраивания в контекстное меню и показа диалога пользовательского ввода, а потом всё что ввёл пользователь передаёт bem create, который уже и делает всю основную работу.

Что же дальше? А дальше --Новый год-- у нас есть хитрый план: довести всё перечисленное до рабочего состояния, покрыть тестами и написать документацию. А потом... не останавливаться на достигнутом, а реализовать ещё bem rm, bem cp, bem mv, а там, глядишь, и сообщество подтянется со своими плагинами. ;)

Хотел бы создавать блоки и элементы с помощью bem create в терминале.

Например, $ ./node_modules/.bin/bem create -l desktop.blocks -b hello Выдает ошибку bash: ./node_modules/.bin/bem: Нет такого файла или каталога

Заманчиво выглядит сгенерить на BEM MapReduce и загрузить в CouchDB. Можно было бы и json отдавать, и html для блоков на разных уровнях. Навскидку проблема с модулями: reduce не поддерживает, а в остальных результаты не кешируются. Может BEM собираться без модулей (все инлайнить)?

Сижу изучаю, просмотрел несколько видео, прочел статьи сверстал пару страниц по туториалам, сверстал свою страницу через BEM, но теперь встал вопрос как эту вёрстку теперь собрать? Вот чтоб в папочку сложились html, css, js, картинки и оставалось упаковать в архив и отправить?

Сижу изучаю, просмотрел несколько видео, прочел статьи сверстал пару страниц по туториалам, сверстал свою страницу через BEM, но теперь встал вопрос как эту вёрстку теперь собрать? Вот чтоб в папочку сложились html, css, js, картинки и оставалось упаковать в архив и отправить?

При попытки создать через терминал .styl файл, ругается на несовместимость с версией bem-core. Установил project-stub с мастера. Что можно сделать? (bem create -l desktop.blocks (уровень переопределения) -b (название блока) -T styl)

Добрый день! При запуске bem server и переходе по ссылке http://0.0.0.0:8080 выдает ошибку

17:21:43.279 - [rebuild] [desktop.bundles/index/index.bemjson.js] file-provider 17:21:43.307 - [failed] [desktop.bundles/index/index.levels] levels 17:21:43.308 - [failed] [desktop.bundles/index/index.files] files 17:21:43.308 - [failed] [desktop.bundles/index/index.deps.js] deps 17:21:43.308 - [failed] [desktop.bundles/index/index.bemhtml.files] files 17:21:43.308 - [failed] [desktop.bundles/index/index.bemhtml.deps.js] deps 17:21:43.309 - [failed] [desktop.bundles/index/index.bemhtml.bemdecl.js] deps-by-tech-to-bemdecl 17:21:43.309 - [failed] [desktop.bundles/index/index.bemhtml.js] bemhtml 17:21:43.309 - [failed] [desktop.bundles/index/index.css] stylus 17:21:43.309 - [failed] [desktop.bundles/index/index.browser.js] browser-js 17:21:43.309 - [failed] [desktop.bundles/index/index.browser.bemhtml.js] bemhtml 17:21:43.311 - [rebuild] [desktop.bundles/index/index.bemdecl.js] bemjson-to-bemdecl 17:21:43.312 - [failed] [desktop.bundles/index/index.html] bemjson-to-html 17:21:43.312 - [failed] [desktop.bundles/index/index.min.css] borschik 17:21:43.312 - [failed] [desktop.bundles/index/index.pre.js] file-merge 17:21:43.313 - [failed] [desktop.bundles/index/index.js] prepend-modules Error: ENOENT: no such file or directory, scandir '/home/dbimok/Документы/bem-new/libs/bem-core/common.blocks' at Error (native) at Object.fs.readdirSync (fs.js:813:18) at module.exports.inherit.load (/home/dbimok/Документы/bem-new/node_modules/enb-bem-techs/lib/levels/level.js:212:28) at /home/dbimok/Документы/bem-new/node_modules/enb-bem-techs/techs/levels.js:110:38 at Array.map (native) at /home/dbimok/Документы/bem-new/node_modules/enb-bem-techs/techs/levels.js:109:42 at Array. (/home/dbimok/Документы/bem-new/node_modules/enb/node_modules/vow/lib/vow.js:202:56) at Immediate.callFns as _onImmediate at processImmediate as _immediateCallback

В чем может быть проблема?

В стандартном project-stub не указано что можно создать папку в desktop.bundles/*/blocks и блок оттуда подтянется. Где это поведение по умолчанию можно изменить?

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