Здравствуйте, пытаюсь прикрутить тесты к своим блокам.

При запуске тестов: node_modules/.bin/enb make specs

Получаю такой результат:

Failed to start mocha: Init timeout Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL.... Domains, protocols and ports must match.

Не подскажите как это можно решить ?

Всем привет.

Запускаем новый проект, все предыдущие устанавливали через generator-bem-stub в качестве сборщика использовали bem-tools, проблем не было. Сегодня пытаемся установить и встретились с проблемой такого характера:

TypeError: undefined is not a function at module.exports.require.create.name.target.methods._compileBEMXJST (E:\Server\Makeup\branch2\node_modules\enb-bemxjst\techs\bem-xjst.js:122:35) at Array. (E:\Server\Makeup\branch2\node_modules\enb-bemxjst\node_modules\vow\lib\vow.js:711:39) at Immediate.callFns as _onImmediate at processImmediate as _immediateCallback

Здравствуйте. Возник следующий вопрос. Смотрел вебинар https://events.yandex.ru/lib/talks/2890/. Вот исходники - https://github.com/bem-events/beminar-3/blob/master/gulpfile.js Как переписать таск, который отвечает за перенос картинок, чтобы они копировались даже если блок не используется на странице, т.е. без использования функции getFileNames?

gulp.task('images', function() { gulp.src('common.blocks/*/.{jpg,png,svg}') .pipe(gulp.dest(params.out + '/images/')); });

Вот так он в images переносит картинки вместе с папками, в которых они лежат. Заранее спасибо!

Коллеги, наверняка уже сталкивались с задачей по созданию отдельных тем. Скажите как решали?

В моей ситуации необходимо обязательно темы делать отдельными css файлами.

Я пока встречал примеры проектов на БЭМ которые на состоят только из статичного html. А как этот инструментарий bem tools работает с фреймворками php ? Ну например yii и laravel.

Привет всем!

Начинаю изучать БЭМ. Есть тестовый проект с одним блоком и одним элементом в нем. Пытаюсь собрать. Безуспешно, категорически не могу получить 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 (правда не нашел ничего по сборке таких вот нано-проектов), но в моей голове мозаика материалов пока не складывается. Я уперся лбом в стену и не понимаю куда копать, потому и задаю сюда вопросы.

Вопрос от @lehakos: Скажите, пожалуйста, а как можно использовать jade вместо json формата для БЭМ? Есть ли такая практика вообще? :) И еще вопрос, хотелось бы использовать плагины Gulp вроде минификатора изображений, генератора спрайтов, livereload и т.д. Возможно ли это совместить с БЭМ сборщиком проекта?

Например у меня есть блок Thing

block("thing")(
  attrs()({
    "itemscope": "",
    "itemtype": "http://schema.org/Thing"
  })
);

И я хочу чтоб блок Product наследовался от Thing

block("product")(
  attrs()({
    "itemtype": "http://schema.org/Product"
  })
);

и на выходе получал: <div class="product thing" itemscope itemtype="http://schema.org/Product"></div> Возможно ли такое?

Так уж получилось, что я разрабатываю сайты на Битриксе. В прошлом году сделали свой модуль, который позволяет нам подключать блоки из 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 – буду только рад)

Добрый день, я тут немного запутался с технологиями и префиксами.

У меня нестандартный проект, объяснять его историю – очень долго и больно) Проект уже в продакшене, мы в него внедряем БЭМ. В общем, все блоки лежат в папке local/blocks.

Папки .bem изначально не было, я добавил папку и пустой levels.js в local/blocks/.bem/levels.js.

Теперь при попытке выполнить bem create -l local/blocks -b 'b-404' -t deps.js получаю: WARNING! Tech module "deps.js" at /usr/local/lib/node_modules/bem/lib/techs/deps.js.js is using API V1. Tech modules API V1 is not recommended to use, because it is slow. Please use tech modules API V2, it makes your build process faster! Instructions for migrating to API V2: http://git.io/gbLDOA

Уже неплохой результат.

Вопроса два:

1. Как можно задать префиксы блоков, чтобы не писать все команды bem create -l local/blocks?
2. Как нужно правильно добавить технологии чтобы они были v2? На проекте используются compass-scss (собирается через gulp), js, deps.js, js-i

Заранее спасибо!

Как известно у ZF своя файловая структура, и поэтому bem-tools нужно адаптировать под эту самую структуру, как?

Всем доброго времени суток. Пробую разбираться в строительстве готовых, сверстанных страниц, при помощи bem-tools. И привлек внимание небольшой нюанс в следующем блоке:

   block : 'select',
      mods : { mode : 'radio', theme : 'islands', size : 'l' },
      name : 'select1',
      val : 2,
      options : [
          { val : 1, text : 'Раз' },
          { val : 2, text : 'Два' },
          { val : 3, text : 'Три' }
      ]
    ...

Вот такой html получается:

<div class="select select_mode_radio select_theme_islands select_size_l i-bem select_js_inited" data-bem="{&quot;select&quot;:{&quot;name&quot;:&quot;select1&quot;}}">
    <input class="select__control" name="select1" value="2" type="hidden">
       <button class="button button_size_l button_theme_islands button__control select__button i-bem button_js_inited _popup-destructor_js_inited" data-bem="{&quot;button&quot;:{}}" role="button" type="button">
          <span class="button__text">Два</span>
          <i class="icon select__tick" aria-hidden="true"></i>
       </button>
</div>

Далее смотрю на стили элемента

.select_theme_islands .select__tick {
   background-image: url('../../libs/bem-components/design/common.blocks/theme/_islands/arrow.svg');
...
}

А перенесенная страница в другой каталог этот svg уже не нашла конечно.

Но это ведь в уже собранных файлах o_O .bem/make.js

process.env.YENV = 'production';

На этой странице использовался только один компонент, но если их несколько... В ручную копировать элементы компонентов, переписывать их url в стилях и т.п. Или есть какие-то проф хитрости которые предстоит изучить?

Хочется получить готовый index.html, _index.js, _index.css и отправить их дальше по конвейеру, отдельно от node-js и bem-tools. Помогите пожалуйста независимо подгрузить "пимпочка.svg" в select bem-core после сборки.

Так же, косвенно есть второй вопрос, возможно его суть как-то повлияла на предыдущий результат. Каталог проекта я собирал с помощью утилиты yo bem-stub. Все движения при сборки повторял за Женей Константиновым, из видео по BEMup в Москве. Но след в след не вышло т.к. yo bem-stub предлагал небольшой список компонентов. bem-components я выбрал, но к примеру bem-core не было среди вариантов далее. И стреди технологий было совсем небольшое колличество, нежели в видео. Если точнее то это все технологии что предлагаются:

? Choose technologies to be used in the project: 
 ◯ BEMJSON
 ◯ ie.css
 ◯ ie8.css
 ◯ ie9.css
❯◯ BEMTREE
 ◯ node.js
 ◯ browser.js+bemhtml

а как же ie6? )) Или другие.

До этого я использовал только саму методологию БЭМ . Т.е. описывал страничку в блоках. Блоки состояли из элементов, блок и элемент могли иметь свои модификаторы. Все стили блоков лежали в одном css файле. Я решил пойти дальше и начал читать раздел - " Методология ->организация файловой системы. " В этом разделе дочитав до пункта https://ru.bem.info/method/filesystem/#Элементы-и-модификаторы-в-отдельных-директориях я решил попробовать его на практике(хранить блоки элементы модификаторы в отдельных папках). Внизу есть ссылка на инструмент для сборки bem-tools, но мне не совсем ясно как его использовать. Т.е. у меня стоит задача.

1. Вынести блоки, элементы модификаторы в отдельные папки.
2. научится собирать это все хозяйство bem-tools

Спасибо за внимание.

Друзья, есть вопрос. Возможно ли команде bem server передать интерфейс/IP, на котором он должен подниматься?

// именованные типы бандлов (хз для чего)
describe('page', 'pages/*', function (node) {
  addTech('blabla', {yolo swag params}); // как обычно
  addTargets(['html', 'css', '?.min.css']);
  // если ? не указан и нет точки — достраиваем до "?.css"

  afterTargetReady('?.min.css', function (target) {
    cp(target.path, releasePath + '/' + target.relativePath);
  });
  afterEach(function () {
    // запускаем после завершения обработки всех таргетов
    sed(node.targets['css'], 's/script/script yolo="swag"/g', '-i'); // условно
  });
});
after(function () {
  // finalizing build
  // cd release; cap deploy?
});

Или даже так:

describe('page', {
  path: 'pages/*',
  yoloswag: 'yes'
}, function (node) {
  // ...
});

При этом технологии можно отдавать списом сервисов по тиму architect (в package.json, например, или отдельном файле), в запускалке можно сделать так, чтобы она смотрела все bem-* пакеты, установленные в node_modules, и собирала сама оттуда технологии. Если какой-то пакет будет предоставлять расширения — он их может просто проксировать через себя.

При этом можно таким же параметром передать describe('all-bundles', { include: '*.bundles/*, exclude: '*.bundles/merged', к вопросу о merged бандле, и после этого в merged бандле указать, что он {include: '*.bundles/merged', dependsOn: 'all-bundles'}. Кажется, что и просто, и понятно. При этом в технологии эта информация о бандле (и его "конфигах") тоже попадет.

/cc @blond @tadatuta @vithar @veged

А есть какие ни будь кейсы, в bem-tools для верстки одного проекта под разные устройтсва, разных форматов экрана? Не имея в виду атрибуты 'm', 's' в компонентах, а как оперативно делить один проект на разные стили, может автоматически подключать разные файлы стилей для разных устройств при сборки или еще что ни будь?

Здравствуйте. Очень нравится оптимизированные файлы после cборки в bem-tools. Сейчас хочу переверстать сайт, построенный на фреймворке Yii при помощи БЭМ. Но появляется вопрос, как использовать склеенную borschik'ом разметку (c трудом читаемую на глаз) в разных layout-ах и элементах view. Думаю это актуально при любом паттерне mvc и разных фреймворках. Дайте пожалуйста рекомендации, как лучше и правильней. Может есть специальные ключи для разбивки исходного файла при сборке.

Всем привет! Ребята, почитал форум, но, хоть убей, не понял, как же получить в итоге конечное дерево css/js/img + index.html? Требуется именно такая структура конечного дерева. Может кто-то подсказать конфиг? И второй вопрос: есть статья о том, как к процессу верстки по бему подключать пхп-программистов и организовывать их работу правильно? Чтобы в тоге получить, например, index.php с версткой и php-кодом? P.S. есть новости о вашем ide?

Столкнулся со следующей проблемой: в коммите https://github.com/bem/bem-tools/commit/dc3e59c6fddd7c928d062042f4da6838124711de был добавлен forceCache для разделённых потоков.

При этом происходит следующее: читается files.json, создаются сборки, обновляется files.json.

Проблема возникает в том случае, если изначально files.json по каким-либо причинам не актуален ( bem был запущен сначала в одной ветке, а потом в другой. А папка cache в .gitignore ), то, соответственно, и итоговые сборки получаются не верные.

Так вот можно ли как-нибудь этого избежать не избавляясь от разделённых потоков ( которые приводят к включению forceCache )? И в чём оптимизация, если в итоге files.json всё равно переиндексируется и обновляется ( но только позже, то есть если потом снова запустить bem, то так как files.json становится актуальным всё отрабатывает предсказуемо )?

При написании проекта с нуля на bem-stub - структура делается по bemjson.

А как править структуру в bem-forum?

И если он не работает по виндой. То тогда как же верстальщики верстают сайты из под линукса? Там же нет фотошопа ? Или как в яндексе устроено рабочее окружение верстальщика... Мне например мешает перейти на линукс только отсутствие фотошопа и ie для тестов.

Скажите, есть ли конвертер или какой-то метод перевода из deps для bem-tools в deps для enb?

Из под bem в enb?

Помнится один замечательный пост http://clubs.ya.ru/bem/replies.xml?item_no=2807

Вопрос - может кто уже создал source map?

А то ребята не хотят работать с простыней, хотят чтобы все было разбито по полочкам.