Как использовать BEM+JADE+GULP?

Question

[evilelf]

Всем привет.

Думаю как удобней использовать бэм с jade.
Нарыл такой модуль https://github.com/ideyuta/nbem
Но не получается его засунуть в gulp.
Идея отличная, было бы вся методология на автомате.
Какие есть похожие штуки?

Answer 1

[lavezzi1]

https://github.com/admdh/adm-dev-kit-gulp
https://github.com/tars/tars
cpt.csssr.ru

Все сборки работают в похожем ключе что и BEM stack. У некоторых даже зависимости помоему есть.

P.S Но я бы не советовал.

Comments

[evilelf]

Чтоб вы не советовали?)

[evilelf]

Спасибо за ссылки, adm-dev-kit-gulp вроде то, что нужно) Попробую юзануть

[lavezzi1]

evilelf: Юзайте лучше https://github.com/bem/project-stub

[evilelf]

lavezzi1: это же оф от бэма) я читал про них, чет не кайфанул) Возможно не допонял, тоже почитаю, спасибо большое!)

[littleguga]

lavezzi1: почему не советуете?

[lavezzi1]

littleguga: Ни одна подобная сборка полноценно не использует все возможности БЭМ. Я про инструменты и технологии. Из-за одного только Jade'a на них смотреть не хочется.

[littleguga]

lavezzi1: а что Вы используете вместо jade? Почему jade отвращает Вас?

Answer 2

[Константин Величко]

Бойлерплейт для jade, stylus и БЭМ https://github.com/zoxon/gulp-front
Еще есть неплохая библиотека миксинов https://github.com/kizu/bemto но это на любителя

Answer 3

[Кот Учёный]

Попробуйте это:

const pug = require('pug');
const pbem = require('pbem');

const scope = pbem({
  blocksDir: __dirname + 'views/blocks'
}).precompile();

const separateTemplate = pug.compileFile(__dirname + 'views/page.pug');

let renderedSeparateTemplate = separateTemplate({
  block: scope.createBlock
});

В шаблонах:

index.pug:

!= block('block-name').local('varName', 'varValue')

blocks/block-name/block-name.pug:

div&attributes( attributes() )
!= element('element-name').local('varName', varName)

https://github.com/bigslycat/pbem