Задать вопрос
Zoxon
@Zoxon
Веб-разработчик

Как реализовать БЭМ блоки для jade (pug), stylus?

Здравствуйте

Я верстаю на jade, stylus и использую систему сборки gulp.
Хотелось бы, чтобы можно было использовать повторно созданные ранее блоки.

Например, при такой структуре
63d5e9985ea94fbeb87d6f2a83b1ba0d.png

Используем в jade
include blocks/top-menu
При сборке остальные части блока автоматически собираются в stylus добавляется к основному файлу стилей, js к основному файлу скриптов.

Есть ли подобные плагины и/или технологии? Или что-то похожее?
  • Вопрос задан
  • 10358 просмотров
Подписаться 13 Оценить Комментировать
Решения вопроса 3
qfox
@qfox
Ответы есть у меня
Пожалуй, посоветую следующее:
1) Иметь хелперы в jade, переменную с названием блока типа b, гененрацию модификатора типа mod(b, 'name', 'val'), переменную content (у меня это объект с toString()) с содержимым блока, и т.п.
2) Не использовать include вообще, чтобы можно было строить дерево, просчитывать в рилтайме зависимости, и даже собирать assets для страницы. Например, через какието хелперы, опять же. При большом делении на блоки все повиснет, конечно, но надо научиться их умно кешировать.
3) На вход постарайтесь подавать bemjson-like структуру с доработками под себя. У нас в проекте сейчас это поле data, в которое кладутся любые данные, нужные для блока. Подтягивание внутренних блоков (и их последующую отрисовку) мы делаем либо в самих шаблонах, либо из объекта content, если контент состоит из массива блоков и строк.
4) Если нужно будет где-то подтянуть блок в элемент — научите хелперы block/element из (2) подмешивать данные при прямом вызове хелпера.
5) Если все замечательно — в конце все собранные assets можно в заголовке (css) и в подвале (js) страницы, предварительно прогнав через uglifyjs, csso, но только на продакшне, где есть их кеширование на nginx.

У нас это все на пхп со смарти (так звезды сложились), но вполне подойдет для рантайм js с jade. Работает замечательно.

Но вообще, если вы используете js, то удобнее использовать bemhtml свежий с js синтаксисом. На bem.info пока не обновляли доку, но базовые блоки в самой библиотеке вполне описывают синтаксис. Будет бонус — шаблоны самодостаточны, и на морде не потребуют подгрузки доп. библиотек, можно будет запускать как есть. В гульп их сборку встроить тоже можно.
Ответ написан
delch
@delch
Frontend developer
Делайте независимые блоки миксинами, подключейте все блоки в одном файле и суйте в шаблон.

/blocks/header/header.jade - блок
/_config/blocks.jade содержит в себе инклуды

/templates/main.jade
include ./_config/blocks.jade

block header
mixin header
Ответ написан
Zoxon
@Zoxon Автор вопроса
Веб-разработчик
Сделал миксинами jade как советовал @delch
Реализацию можете посмотреть (скопировать) или использовать все как есть.
gulp-front

Модули разбиты по папкам в папке файлы с «технологиями» (jade, stylus, js), папка для статичных файлов модуля вроде картинок. Папка data для json данных.
Вдохновлялся tars
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
sosnovskyas
@sosnovskyas
Вот тут (https://ru.bem.info/forum/-155/) товарищ показывает и рассказывает о такой вот (https://github.com/kizu/bemto/) штуке. Хоть вопрос с бородой уверен найдёте для себя полезным если вопрос актуален
Ответ написан
Комментировать
jt3k
@jt3k
Фронтендер, люблю работать и получать удовольствия
не читал но тоже добавлю.
Делай блоки как в csssr - шаблоне https://github.com/CSSSR/csssr-project-template/tr...
Подозреваю, что посоны выше уже описывали всё это добро по 2 раза, но этот подход наиболее хороший
Ответ написан
Комментировать
eruditecat
@eruditecat
Красноглазик
Я столкнулся с тем же вопросом, касаемо Jade (ныне Pug). Пришлось писать свою библиотеку. Недавно выложил на Гитхаб, подключайтесь к разработке. https://github.com/bigslycat/pbem
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы