bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Скрещиваем Bem и Битрикс. Сборка #454

Open mbakirov opened 9 years ago

mbakirov commented 9 years ago

Так уж получилось, что я разрабатываю сайты на Битриксе. В прошлом году сделали свой модуль, который позволяет нам подключать блоки из local/blocks в рантайм страницы. Ранее писал, что сборку проводим через gulp. Сейчас хотим пойти дальше: перенести сборку файлов технологий css, js на bem make и добавить собрку бандлов для страниц local/bundles.

С блоками я разобрался, с бандлами тоже, добавил технологию scss (по аналогии с sass). Что осталось?

  1. Изменить технологию scss, чтобы она заработала через gulp-compass – думаю, тут осилю я сам, нужно только время
  2. Настроить сборку файлов технологий (css, js) в папке блока
  3. Настроить сборку бандлов, сейчас получаю ошибку http://take.ms/3blFQ (мой .bem/make.js – http://pastebin.com/kQHFt736)
  4. Отключить при сборке бандла минификацию html

PS: про enb в курсе, если можете помочь в формулировании нужного формата сборки в терминах enb – буду только рад)

tadatuta commented 9 years ago

Для примера сборки файлов блоков см. https://github.com/bem/project-stub/blob/borschik-js-freeze/.bem/make.js#L76-L92

Чтобы разобраться с ошибкой, возникающей при сборке бандлов, нужно еще взглянуть на level.js, где описывается путь до технологии bemhtml. Есть возможность запушить на github всю папку .bem?

Отключить при сборке бандла минификацию html

см. https://ru.bem.info/forum/332/

mbakirov commented 9 years ago

@tadatuta весь репозиторий с нашим шаблоном в https://bitbucket.org/an1ma/aa.template/src

mbakirov commented 9 years ago

Если вопрос с минификацией html решается только через enb, то правильно ли я понимаю, что мне придется для сборки использовать enb make?

Если да, то вопрос про сборку файлов блоков следует отнести, наверное, к enb? А как там с технологиями из .bem и файлами level.js обстоят дела?

Guria commented 9 years ago

Минификации нет. А вопрос с получением на выходе отформатированного html решается пропусканием результата сборки через любой html beutifier.

tadatuta commented 9 years ago

Если вопрос с минификацией html решается только через enb, то правильно ли я понимаю, что мне придется для сборки использовать enb make?

Не-не, подойдет любой HTML-beautifier. Я когда-то делал технологию на основе tidy, но там тянутся нативные зависимости, так что есть смысл перейти на чистое JS-решение, тот же js-beautify, например.

вопрос про сборку файлов блоков следует отнести, наверное, к enb?

ENB не умеет собирать файлы блоков. Как воркэраунд можно написать технологию, которая внутри будет вызывать тот же gulp.

как там с технологиями из .bem и файлами level.js обстоят дела?

Никак. ENB использует свои собственные конфиги.

tadatuta commented 9 years ago

весь репозиторий с нашим шаблоном в https://bitbucket.org/an1ma/aa.template/src

Судя по всему, происходит следующее. В make.js декларируется название технологии для сборки (например, bemhtml), но нигде не указывается путь к ее реализации.

Для «ядерных» технологий будет работать без явного указания, т.к. технологии встроены в ядро bem-tools (https://github.com/bem/bem-tools/tree/support/0.9.x/lib/techs), а для «кастомных» нужно явно указать, где их брать. В качестве примера см. https://github.com/bem/project-stub/blob/bem-core/.bem/levels/blocks.js (этот файл зовется из https://github.com/bem/project-stub/blob/bem-core/.bem/levels/bundles.js#L7, который в свою очередь подключается с помощью https://github.com/bem/project-stub/blob/bem-core/desktop.bundles/.bem/level.js).

Вообще я бы рекомендовал зайти с другой стороны — взять project-stub, где все уже настроено, и оторвать лишнее.

mbakirov commented 9 years ago

Вообще я бы рекомендовал зайти с другой стороны — взять project-stub, где все уже настроено, и оторвать лишнее.

@tadatuta я как раз с этого и начал, но видимо, много оторвал...

qfox commented 9 years ago

@mbakirov А вы какое-то одноразовое решение делаете? Кажется, что многим было бы интересно, и есть люди, которые могли бы поучаствовать в разработке.

mbakirov commented 9 years ago

@zxqfox нет, мы делаем не одноразовое решение. Вопросом скрещивания БЭМ и Битрикса занимаюсь уже давно, вот в прошлом году нашел, как мне кажется решение и написал свой модуль, который подключает блоки в рантайм CMS из папки local/blocks (выбирает .css и .min.js).

Почему я так взялся сейчас: я более-менее разобрался bem-tools и простыми технологиями. Появилась идея добавить подключение в рантайм битрикса бандлов из local/bundles. Например, на странице /index.php используется 100500 блоков, их проще увязать в bemjson (или deps.js) бандла и подключить сразу бандл local/bundles/index.

Собираем бэм-битриксовый стаб тут: https://bitbucket.org/an1ma/anima-stub/ Репозиторий паблик, ограничения только на ветку master, так что если есть желание присоединиться – очень буду рад))

Сейчас в ветке add-bem-make у меня опять ошибка path must be a string((

tadatuta commented 9 years ago

@mbakirov Вижу как минимум 2 проблемы:

  1. Технология сборки browser.js требует ym. Подозреваю вы его не используете в принципе и нужно просто оторвать this.getYmChunk(output) в local/.bem/techs/v2/vanilla.js.js
  2. В сборку не попадают базовые BEMHTML-шаблоны (код блока i-bem.bemhtml) из bem-core. Без него шаблоны работать не будут.
mbakirov commented 9 years ago

@tadatuta Спасибо! Помогло! bem make прошел без ошибок, однако, ничего так и не собралось в index.html, index.js, index.sass.css (((( Куда еще копать можно?

tadatuta commented 9 years ago

@mbakirov Я отправил пулл-реквест https://bitbucket.org/an1ma/anima-stub/pull-request/1/fix-build/diff

mbakirov commented 9 years ago

@tadatuta Слил, сделал bem make, собрался html, собрался js, но не собрался css(((