Как правильно использовать gulp-bem?

Форум /

Всем привет! Осваиваю методологию BEM и хочу внедрить её в наши проекты. Мы используем gulp и не хотим от него отказываться, поэтому решил попробовать gulp-bem, но столкнулся с не понимаем того как работаем этот модуль. На гите есть пример: var gulp = require('gulp'); var bem = require('gulp-bem'); var concat = require('gulp-concat');

var levels = ['base', 'blocks']; var tree = bem(levels);

tree.deps('blocks/page') .pipe(bem.src('{bem}.css')) .pipe(concat('index.css')) .pipe(gulp.dest('./dist'))

Вот тут всё понятно: var levels = ['base', 'blocks']; var tree = bem(levels);

А вот тут возникла сложность: tree.deps('blocks/page') Что делает этот код? Спасибо!

9 years ago

belozer

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

9 years ago

SmirnovW

Т.е. например у меня такая структура проекта: blocks/ --- header/ ------ header.css ------ header__content.css
------ header.js Этот код найдёт блок header?

9 years ago

belozer

Да, если они используются в проекте. Только не блоки, а технологии. У тебя header - это блок.

Или у тебя есть блоки: footer, page, header, menu но используются только header и menu (то в сборке будут только header и menu).

А если, например, у тебя в зависимости header есть блок page то результате конечной сборки будут блоки page, header, menu.

При этом произойдёт склеивание всех версий блоков из разных уровней. Например на первом уровне блок header имел размеры width: 200px; height: 200px на втором уровне он изменил высоту: height: 192px на третьем уровне он поменял цвет: background-color: #844

в результат мы получили нужный нам header.

width: 200px; 
height: 192px;
background-color: #844;

9 years ago

SmirnovW

Так, а как я должен указать какие блоки я использую? Там в примере вроде бы ничего такого не указывается, или я что то не до конца понял?

9 years ago

belozer

Ты через bemjson делаешь разметку? Сборщик сам определяет какие блоки задействованы исходя из разметки.

А ещё почитай про deps https://ru.bem.info/technology/deps/about/

9 years ago

SmirnovW

Я создал index.bemjson.js, добавил в него простой код: { block: 'menu' } Положил этот файл тут "blocks/page" По пути "blocks/menu" лежит файл menu.css

В gulpfile.js написал следующее: var gulp = require('gulp'), bem = require('gulp-bem'), concat = require('gulp-concat');

var levels = ['blocks']; var tree = bem(levels);

gulp.task('default', function () { tree.deps('blocks/page') .pipe(bem.src('{bem}.css')) .pipe(concat('index.css')) .pipe(gulp.dest('./dist')); });

Но почему то ничего не создаётся. Что ещё я упустил?

9 years ago

apsavin

Не пользовался gulp-bem, но предположу, что проблема в том, что файл должен иметь имя page, а не index.

9 years ago

SmirnovW

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

9 years ago

belozer

@SmirnovW посмотри здесь пример. https://github.com/iamstarkov/gulp-bem-stub

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