Тихий Fail при сборке мини-проекта (bemhtml -> html)

Привет всем!

Начинаю изучать БЭМ. Есть тестовый проект с одним блоком и одним элементом в нем. Пытаюсь собрать. Безуспешно, категорически не могу получить html. Хотя сборка вроде бы проходит без ошибок.

Структура проекта до сборки:

├── common.block
│.....└── b-head
│.............├── b-head.bemhtml
│.............├── b-head.css
│.............└── __title
│....................├── b-head__title.bemhtml
│....................└── b-head__title.css
└── pages.bundles
 ......└── index
 ..............└── index.bemjson.js

"Проект" принципиально сделан с нуля, без использования bem-components - чтобы понять как создаются блоки, как из bemhtml получается просто html, как собирается весь проект.

Контент файлов: ---------------- b-head.bemhtml -----------

block('b-head')(
   tag()('h1'),
   content()(
      {elem : 'title', content : 'Yo!'}
   ) 
)

-------------- b-head__title.bemhtml --------------

block('b-head').elem('title').tag()('i')

-------------- index.bemjson.js ----------------------

({
    block: 'b-head',
    content: [
        { elem: 'title', content: 'H' },
    ]
})

CSS пока не важно, больше ничего не трогал. (код выложен на https://bitbucket.org/shbma/codepr-6_bem3)

Сборку выполняю по инструкции https://ru.bem.info/tools/bem/bem-tools/commands/

команда: bem create -l pages.bundles -b index -T bemdecl.js результат: успешно cоздается файл декларации pages.bundles/index/index.bemdecl.js

команда: bem create -l common.block -b b-head -T bemdecl.js результат: успешно создался файл декларации common.block/b-head/b-head.bemdecl.js

команда: bem build -l common.block -l pages.bandles -d pages.bundles/index/index.bemdecl.js -t deps.js -o pages.bundles/index -n index результат: успешно создался файл зависимостей pages.bundles/index/index.deps.js

команда: bem build -l common.block -l pages.bandles -d pages.bundles/index/index.deps.js -t css -o pages.bundles/index -n index результат: создался файл импорта стилей pages.bundles/index/index.css

команда: bem make результат:

22:56:32.837 - info: bem 0.9.0
22:56:33.082 - info: Graph:
== root
 all
   build
     pages.bundles*

22:56:33.090 - info: [i] Going to build 'all' [1]
22:56:33.108 - info: [t] isValid() time for "build" [1]: 1ms
22:56:33.108 - info: [*] make 'build' [1]
22:56:33.108 - info: [t] Build time for "build" [1]: 1ms
22:56:33.109 - info: [t] isValid() time for "all" [1]: 0ms
22:56:33.109 - info: [*] make 'all' [1]
22:56:33.110 - info: [t] Build time for "all" [1]: 1ms
22:56:33.111 - info: [t] Build total: 270ms

ничего не произошло - html файлов не появилось

Пробуем по-другому:

команда: bem server результат:

23:00:52.405 - info: bem 0.9.0
23:00:52.412 - info: Project root is '/home/michael/code-production/les6_bem/bem-tools-test'
23:00:52.658 - info: Graph:
== root
 all
   build
     pages.bundles*

23:00:52.668 - info: Server is listening on port 8080. Point your browser to http://localhost:8080/

На запрос http://localhost:8080/index.html отдает 404 ошибку, в консоли пишет

warn: *** HTTP error: 404, /home/michael/code-production/les6_bem/bem-tools-test/index.html

И опять-таки никаких html-файлов внутри папок проекта не образуется

Есть какие-то варианты решения проблемы?

P.S. Извиняюсь, если этот пост покажется очевидной банальностью тому, кто в теме. В БЭМ я чайник, шерстю сайт, есть отличные вебинары по сборке css и js, теория по синтаксису bemhtml (правда не нашел ничего по сборке таких вот нано-проектов), но в моей голове мозаика материалов пока не складывается. Я уперся лбом в стену и не понимаю куда копать, потому и задаю сюда вопросы.

9 years ago

Guria

Отличное и исчерпывающее описание проблемы. Попробую ответить чуть позже если к тому времени больше никто не ответит.

9 years ago

tadatuta

Привет!

Есть простой ответ и сложный.

Простой звучит так: стоит склонировать заготовку проекта или воспользоваться генератором, а эксперименты начинать с туториала.

Такой подход позволит разобраться с базовыми вещами, посмотреть на то, как все устроено и докапываться до сути на основе чего-то работающего.

А подключения bem-components бояться не нужно — до тех пор, пока в BEMJSON проекта не упоминаются какие-либо блоки из библиотеки, они просто не попадут в сборку и, соответственно, никак не повлияют на результат.

Теперь сложный путь.

1. Сборка

Проекты бывают очень разные и, соответственно, собирать их можно очень по-разному. Сборщик не пытается угадать, что раз в папке pages.bundles/index/ оказался index.bemjson.js, а в папке common.block (кстати, обычно мы называем common.blocks) нашлись папки с шаблонами, то ему необходимо собрать шаблоны, а затем с их помощью получить HTML. Потому что называния файлов и папок могут быть самые разные, даже шаблонизаторы могут применяться разные и результат может ожидаться совершенно произвольный (например, если страница генерируется динамически с проверкой прав пользователя и походом в базу данных, то исходного BEMJSON у нас заранее просто быть не может, а HTML нужно не на диск сохранять, а отдавать пользователю в браузер в ответ на запрос).

Поэтому сборщик ожидает конфиг с описанием особенностей каждого конкретного проекта. Более того, есть несколько альтернативных сборщиков (мы рекомендуем мигрировать с bem-tools на ENB) с отличающимся форматом конфига. Примеры конфигов можно найти в https://github.com/bem/project-stub в папках .bem и .enb соответственно.

Общий принцип работы сборки, который требуется для сборки HTML из BEMJSON с помощью BEMHTML, следующий:

Посмотреть в index.bemjson.js и получить список всех сущностей (блоков, элементов и модификаторов), которые там перечислены (index.bemdecl.js).
Получить список всех сущностей с учетом всех зависимостей полученных сущностей (index.deps.js)
Собрать по списку из п. 2 необходимые технологии (CSS, JS, BEMHTML, HTML). Для этого найти исходники каждой сущности на уровнях переопределения, участвующих в сборке и что-то с ними сделать. Например, в случае сборки CSS можно составить список import-ов нужных файлов, для JS — просто склеить файлы из списка в правильном порядке, а для шаблонов склеить и скомпилировать. Правила, как именно поступать в случае каждой конкретной технологии, описаны в одноименных модулях для сборки.

2. BEMHTML

Шаблонизатор предполагает некое поведение по умолчанию. Например, если написать BEMJSON вида

{
    block: 'b1',
    content: [
        {
            elem: 'e1',
            content: 'Я b1__e1'
        }
    ]
}

и не написать никаких шаблонов, то в результате сгенерируется вот такой HTML:

<div class="b1"><div class="b1__e1">Я b1__e1</div></div>

Это поведение по умолчанию описано в т.н. базовых шаблонах, которые хранятся в блоке i-bem в библиотеке bem-core.

Т.о. чтобы шаблоны работали правильно, в сборку необходимо включить этот файл. Проще всего это сделать подключив целиком bem-core, т.к. все равно следующим шагом понадобится обвязка страницы (doctype, теги html, head, body, вот это все), которая предоставляется блоком page и указать от него зависимость в тех блоках, для которых написаны шаблоны (в случае использования блока page из bem-core, зависимость указана из коробки).

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

Я готов помочь, как с анатомией project-stub, так и с попытками все-таки пройти по сложному пути. Но заранее предупреждаю, что в результате все равно получится что-то на него похожее ;)

9 years ago

shbma

Спасибо за развернутый ответ. Посмотрел простой путь - развернул project-stub - работает). Особенно порадовал генератор - позволяет сделать рабочий проект с минимумом непонятных файлов. Вот он, свет в конце текущего участка тоннеля). Попробую зайти с этой стороны.

Чтобы оставлять комментарии, необходимо авторизоваться.