Сборка на основе bemdecl. Вот grep:

% grep -r root ./desktop.bundles/*        
./desktop.bundles/index/index.bemtree.js:        if ($$block === "root" && !$$elem && (__$ctx.__$a0 & 1) === 0) {
./desktop.bundles/index/index.bemtree.js:    console.log("root");
./desktop.bundles/index/index.deps.js:        "block": "root"
./desktop.bundles/index/index.bemdecl.js:    { name: 'root' },

Сам ./desktop.blocks/root/root.bemtree.js

block('root').replace()(function() {
    var data = this.data = this.ctx.datal;
    console.log('root');

    return {
        block: 'page',
        favicon: '/favicon.ico',
        title: data.title,
        mods: { view: data.view },
        styles: [
            { elem: 'css', url: '/index.min.css' }
        ],
        scripts: [
            { elem: 'js', url: '/index.min.js' }
        ]
    };
});

Подозреваю, что весь затык в какойто мелочи. Однако я уже проверил все варианты, что пришли мне в голову. Другие блоки например page работают нормально; код блоков взят из проекта где они работали, в неизменном виде.

Проект тут: https://github.com/mikhailmakarov/zhifu-first-bem

Задача собрать всю статику и html, css, js в папку dist. Подскажите пожалуйста.

Я только начал изучать BEM. Может я что-то не правильно делаю.

Вот что в npm-debug.log при выполнении команды npm run dist:

17 error Windows_NT 6.3.9600 18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dist" 19 error node v5.1.1 20 error npm v3.3.12 21 error code ELIFECYCLE 22 error zhifu-first-bem@1.0.0 dist: YENV=production enb make dist 22 error Exit status 1 23 error Failed at the zhifu-first-bem@1.0.0 dist script 'YENV=production enb make dist'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the zhifu-first-bem package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error YENV=production enb make dist 23 error You can get their info via: 23 error npm owner ls zhifu-first-bem 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]

Есть страница, хочу в целях последующиего инлайна стилей, разделить css файл на две части, одну из которых в последствии заинлайнить. Одно из решений которое приходит в голову

1. Создать руками deps файл
2. Вычесть его из deps файла бандла
3. Собрать стили на основе разных deps файлов
4. Получить два разделенных файла.

Может есть способ попроще? :)

Просьба разработать слайдер :) на подобии: https://jqueryui.com/slider/ http://www.eyecon.ro/bootstrap-slider/

Добрый вечер, есть что-то готовое типа Tooltips (bootstrap), чтобы при наведении (без клика) на ссылку всплывала подсказка?

Всем привет, подскажите почему нет этих двух атрибутов в библиотеке bem-components для блока input? Понятно, что можно модификатором навесить hidden, а зачем? И что в случае reset предлагаете?

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

Спешу сообщить, что мне удалось довести этот инструмент до того состояния в котором его не стыдно показать BEM сообществу.

• Написаны тесты
• Есть CI
• Есть достаточный объем документации по использованию этого инструмента

В конце концов выпущена версия 0.0.1 пакета bem-tools-find.

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

В этом посте мы постарались ёмко рассказать про всё, что произошло в мире БЭМ за четыре месяца с предыдущего дайджеста.

Новости библиотек

• Выпустили bem-core 2.8.0. Главная тема релиза — интернационализация (i18n) из коробки.
• Продолжаем работать над мажорным релизом bem-core, который принесёт множество заметных улучшений в ядро.
• Выпустили bem-components 2.4.0. Главная тема релиза — обеспечение доступности (a11y) контролов, теперь они не уступают нативным.
• Выпустили bem-history 3.1.0.
• Реализовали dist-поставку библиотек bem-core и bem-components: вы можете подключить собранные CSS + JS и использовать блоки, просто копируя HTML из документации на bem.info.
• Силами сообщества, выпустили bem-grid 2.2.0 и готовится к выпуску bem-forms 1.0.0.

  Новости технологий

Полностью переписали https://github.com/bem/bem-xjst — ядро для BEMHTML и BEMTREE. Оно стало заметно быстрее (как при сборке, так и при выполнении шаблонов), не требует компиляции, позволяет добавлять новые шаблоны в рантайме и вот-вот обзаведется новыми полезными фичами вроде source maps. Попробовать на деле можно здесь.

Новости инструментов

В начале декабря мы провели очередной Хакатон по БЭМ, посвященный разработке инструментов.

По итогам Хакатона появились:

• прототип bem-tools 2.0
• плагины для bemhint
• сборка project-stub с помощью gulp
• сборка project-stub на Webpack

Кроме этого, мы активно работали над ENB:

• Выпустили ENB 1.0.0.
• Поработали над плагинами ENB:
  • enb-bem-techs v2.0.0
  • enb-stylus v2.0.0
  • enb-bh v1.0.0
  • enb-xjst v2.0.0 и enb-bemxjst v2.0.0
  • выпустили новый плагин для ENB, который ведет себя, как DefinePlugin для Webpack: ищет в коде бандла плейсхолдеры с названием переменных и заменяет их на соответствующие значения.

    Новости документации

Опубликовали новые документы:

• Методология сборки БЭМ-проекта — описали процесс сборки БЭМ-проекта, его основные понятия и принципы.
• Декларации в БЭМ — рассказали, для чего и как мы их используем в сборке БЭМ-проектов, а также описали основные способы получения декларации.

Обновили документы:

• Как создать свой проект на БЭМ — документ обновлён до новых версий библиотек.
• История создания БЭМ.

  Новости мероприятий

• Провели два вебинара по БЭМ:
  • первый про декларативные шаблоны, провел @vitkarpov;
  • второй про i-bem.js — @tadatuta.
• Организовали большой Хакатон по БЭМ, который был посвящен разработке инструментов для БЭМ. Хакатон был в основном внутренним, снаружи мы пригласили всего трёх человек. Отчеты о хакатоне и реализованных проектах можно прочитать в блоге на bem.info.
• @tadatuta рассказал подробный доклад на Субботнике о том, чем bem-components отличается от Bootstrap и в чем его превосходит.
• Ещё @tadatuta провел вебинар на GeekWeek про разработку веб-интерфейсов по БЭМ-методологии.

  В мире БЭМ

• BEM – CSS Code Organization Methodology.
• Длинная телега про Бутстрап.
• BEM, Sir!.
• 19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек.
• Плагин для posthtml будет особенно полезен тем, кто хочет продолжать писать HTML руками.

Интересные темы на форуме

• Трехзвенная архитектура в БЭМ.
• Про обертки.

Подключаю скрипты на страницу:

scripts: [{ elem : 'js', url : 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places' }],
scripts: [{ elem : 'js', url : 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' }],

смотрю исходный код, их нет. В чем причина?

Всем привет! Как добавить id к блоку (блок div)?

как к body добавить onload="initialize()" ?

Привет, хочу рассказать о результатах нашей команды на минувшем хакатоне.

Со мной в команде были Сергей Бережной, Вадим Яловенко , Алексей Хлебаев и Александр Потапенко.

В мире JS и CSS написано достаточное количество линтеров кода, которые делают нашу разработку более удобной и надежной, но до сих пор не было реализовано ни одного линтера, который что-то знает про БЭМ.

И вот это послужило основной причиной для написания БЭМ-линтера, который из коробки знает про специфику БЭМ-проектов.

За несколько дней на хакатоне мы реализовали ядро линтера – bemhint, предоставляющее API для написания внешних плагинов, через которые реализуются проверки БЭМ-сущностей проекта.

Реализованные плагины:

1.Два плагина, которые позволяют интегрировать jshint и jscs в БЭМ-проект через bemhint:

• bemhint-plugins-jshint
• bemhint-plugins-jscs

Эти два плагина позволяют через конфиг bemhint-а конфигурировать и запускать соответственно jshint и jscs. Зачем? Ответ очень прост: jshint и jscs не дают возможности написать отдельный конфиг для проверки, например, *.deps.js-файлов и отдельный конфиг для проверки *.js-файлов. В свою очередь bemhint предоставляет возможность конфигурировать не маски файлов, а технологии, то есть в данном случае технологии deps.js и js.

2.Плагин для проверки ненужных технологий в проекте – bemhint-plugins-redundant-techs.

Плагин будет полезен для тех проектов, которые мигрируют с одной технологии на другую, например, bemhtml → bemhtml.js или css → styl.

3.Плагин, который умеет проверять наличие неправильных селекторов в технологии styl – bemhint-plugins-check-file-entity (у плагина появилась документация, поэтому подробнее можно почитать на github).

Мы создали тестовый репозиторий bemhint-test-prj, который демонстрирует работу bemhint и выше описанных плагинов.

В конце хочу поблагодарить всех ребят из нашей команды и организаторов хакатона. Было очень интересно :)

Привет, пришла и моя очередь рассказать о содеянном на минувшем хакатоне.

Основная мысль, которая преследует меня уже долгое время — возможность сборки БЭМ-проектов с помощью любого инструмента. И именно с этой идеей я пришёл в то раннее утро субботы агитировать собравшихся присоединиться ко мне, в надежде немного приблизить неизбежное будущее, в котором нет ENB.

Несмотря на невнятную речь, ко мне присоединились очень крутые ребята, без которых мы бы не продвинулись так далеко: @arikon, @zxqfox, @awinogradov, спасибо вам огромное!

Ставь задачу правильно

Утверждение «сборка БЭМ-проектов с помощью любого инструмента» звучит слишком абстрактно.

В двухдневный формат хакатона такая задача совсем не укладывалась. Надо было сформулировать что-то более конкретное. Поэтому мы решили, что критерием успеха будет сборка project-stub с помощью gulp.

Сам gulp был выбран практически случайно. Важно было доказать гипотезу о сборке с помощью любого инструмента. На эту роль gulp подходит как нельзя лучше: он популярен, прост, да и ребята из соседней команды уже решили делать сборку с помощью webpack.

Готовь сани летом

На самом деле основная работа была сделана заранее.

Специфика сборки БЭМ проектов заключается в организации уровней переопределения и использовании зависимостей блоков. Подробнее об этом можно почитать на bem.info.

Необходимость модульной сборки была сформулирована уже давно. На прошлогоднем хакатоне мы решили задачу интроспекции уровней — bem-walk.

Кроме того, к этому хакатону я написал прототип модуля для работы с зависимостями блоков — bem-deps.

Работа оказалась проделанной не зря. Модуль для работы с зависимостями пригодился не только нам, но и команде, занимающейся сборкой с помощью webpack. А интроспекция и вовсе оказалась нужна каждой команде.

Результаты

Проект: @bem/gulp.

Сборка project-stub: ветка feature/gulp

Ничто не опишет проект лучше, чем его API. Поэтому без слов пример того, что у нас получилось.

import gulp from 'gulp';
import bem from '@bem/gulp';
import concat from 'gulp-concat';
import merge from 'gulp-merge';
import bemhtml from 'gulp-bemhtml';
import stylus from 'gulp-stylus';
import postcss from 'gulp-postcss';
import postcssUrl from 'postcss-url';

// Создаём хелпер для сборки проекта
var project = bem({
    bemconfig: {
        /* загружаем информацию об уровнях с помощью `bem-config` */ 
    }
});

// Создаём хелпер для сборки бандла
var bundle = project.bundle({
    path: 'desktop.bundles/index',
    declPath: 'index.bemdecl.js'
});

gulp.task('css', function () {
    return bundle.src({tech: 'css', extensions: ['.css', '.styl']})
        .pipe(stylus())            
        .pipe(postcss([
            postcssUrl({ url: 'inline' })            
        ]))
        .pipe(concat(`${bundle.name()}.css`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('js', function () {
    return
        merge(
            gulp.src(require.resolve('ym')),
            bundle.src({ tech: 'js', extensions: ['.js', '.vanilla.js', '.browser.js'] })
        )
        .pipe(concat(`${bundle.name()}.js`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('bemhtml', function () {
    return bundle.src({ tech: 'bemhtml.js', extensions: ['.bemhtml.js', '.bemhtml'] })
        .pipe(concat(`${bundle.name()}.bemhtml.js`))            
        .pipe(bemhtml())
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('build', gulp.series('css', 'js', 'bemhtml'));
gulp.task('default', gulp.series('build'));

По скорости в текущем состоянии сборка project-stub оказалась соизмеримой со сборкой на стеке ENB.

Что дальше?

Вначале мы приведём код в человеческий вид, покроем тестами и напишем примеры использования с минимальной документацией.

Мы уже получили массу пожеланий и предложений, которые обязательно учтём.

Как только всё будет готово, обязательно расскажем вам. А самое главное — будем внедрять в реальные проекты и реагировать на фидбэк.

Общие модули bem-walk и bem-deps оказались универсальными, и в каком-то смысле уже проверенными в бою. Поэтому, кроме использования их для сборки на gulp и webpack, мы планируем внедрить их в ENB.

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

Присылайте свои идеи и задавайте вопросы на форуме или в ишьюсах к репозиториям из организации gulp-bem.

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

Привет, давно ничего не рассказывал, а есть о чём — исправляюсь.

Версия ENB 1.0.0 появилась пару месяцев назад. Многие из вас, наверное, уже увидели этот релиз, а может даже успели перейти.

Но я всё же расскажу, зачем оно нам. Основная цель релиза — не сделать ничего полезного, и мы с этой целью прекрасно справились =)

Но это ещё не всё.

API

Единственный способ использовать ENB до 1.x — подключать модули, указывая путь к ним.

var buildFlow = require('enb/lib/build-flow'),
    BaseTech = require('enb/lib/tech/base-tech'),
    FileList = require('enb/lib/file-list'),
    asyncFs = require('enb/lib/fs/async-fs.js');

Такой способ не даёт возможности отличить модули, предназначенные для внешнего использования от внутренних, не предназначенных никому, кроме самого ENB.

Начиная с версии 1.0.0 мы предоставили всё необходимое с помощью API.

var enb = require('enb');

enb.buildFlow // Хэлпер для создания технологий
enb.BaseTech  // Базовая технология, от которой можно унаследоваться
enb.FileList  // Класс для передачи списка файлов в технологию 
enb.asyncFs   // vow-fs

Важно: если вы используете модули, которые не предоставляются посредством API, то делаете это на свой страх и риск. Это внутренняя реализация, а значит нет никакой гарантии в соблюдении обратной совместимости в минорных или патчевых версиях.

Технологии

Пакет ENB — это, прежде всего, ядро и хэлперы для создания технологий. Сами технологии должны храниться в отдельных пакетах.

Поэтому мы удалили все устаревшие технологии, а также те, которые переехали в другие пакеты. Остались только 4 технологии для работы с файлами:

• file-copy
• file-merge
• file-provider
• symlink

  Утилиты

При создании технологий вы могли использовать некоторые из утилит. Мы вынесли их в отдельные пакеты:

• async-require
• require-or-eval
• mock-enb

Модуль drop-require-cache был удалён. Вместо него нужно использовать clear-require.

Если вы использовали css-preprocessor, то мы рекомендуем заменить его на PostCSS, особенно если вы используете Autoprefixer. А для плавного перехода css-preprocessor вынесен в отдельный пакет.

История изменений

Подробнее о всех изменениях читайте в примечании к релизам: v1.0.0, v1.0.1, v1.1.0, v1.1.1.

Вопросы про сборщик ENB традиционно ждем на нашем форуме с меткой enb.

Приятного использования!

Формирую небольшую библиотеку блоков, для нескольких проектов. Сейчас на проектах не используется БЭМ, но есть файл cosmetic.css, в который вынесены модификатры для текста и отступов. Они примешиваются к любым элементам (для разных проектов значения могут меняться, но модификаторы остаются те же). Такой вариант привычен для дизайнерской команды и удобен для дизайна в браузере. Мне нужно сделать тоже самое, только на БЭМ стеке. Как вы считаете уместен ли вариант создания двух блоков .text и .space, которые будут примиксовываться. Думал о варианте с вынесением переменных, но тогда их нужно будет импортировать в каждый .styl файл.

Текст - https://github.com/bem-custom/bem-custom-blocks/blob/master/desktop.blocks/text/text.styl

Отступы - https://github.com/bem-custom/bem-custom-blocks/blob/master/desktop.blocks/space/space.styl

У меня в проекте в каждом из блоков может быть/или не быть папка img, в корой лежат png-шки. Как собирать их при сборке в папку bundles//img/.\ пользуясь вышеуказанными технологиями?

12-13 декабря у нас был хакатон по разработке инструментов БЭМ. Я участвовал в команде переосмысления и разработки прототипа bem-tools, напишу, что у нас получилось.

В нашей команде было 6 человек:

• Вова Гриненко (ментор команды)
• Виталий Харисов
• Андрей Кузнецов
• Илья Исупов
• Ваня Воищев
• Миша Баранов

Решили, что bem-tools надо делать по архитектуре «минимальное ядро + плагины». Ядро не умеет ничего, кроме общей обвязки про CLI, поиска локально или глобально установленных пакетов bem-tools-something и запуска указанной пользователем команды.

Собственно, так и получилось. Весь код ядра умещается на один экран и, кажется, развивать тут дальше нечего.

Плагин предоставляет JS API, которое ничего не знает про CLI (файл index.js в корне) и CLI интерфейс (файл cli.js). Это позволяет рассматривать каждый плагин, как отдельный пакет, который можно использовать независимо от всех остальных.

Мы успели сделать минимальные версии bem-tools-init, bem-tools-make, bem-tools-create и bem-tools-find. А так же вспомогательные bem-fs-scheme и bem-config. Миша Баранов делал плагин для IntelliJ IDEA для создания БЭМ-сущностей из интерфейса IDE.

Как это обычно бывает после хакатона, всё в сыром состоянии, использовать в работе это всё пока нельзя, но зато можно успеть повлиять на API и помочь нам с доработками.

Обо всём этом ниже подробнее.

Скачиваем bem-tools:

npm i bem/bem-tools#WIP
bem

Если всё прошло успешно, после запуска bem увидим:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem [OPTIONS] [ARGS]


Options:
  -h, --help : Help
  -v, --version : Version

Установим команду init:

npm i bem-incubator/bem-tools-init

Запускаем ещё раз bem и видим, что появилась команда init:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem COMMAND [OPTIONS] [ARGS]
  bem [OPTIONS] [ARGS]

Commands:
  init : Init

Options:
  -h, --help : Help
  -v, --version : Version

Запуск bem init my-test-project создаст my-test-project и в ней файл bemconf.json с содержимым

{
   "root": true
}

Это маркер корня проекта, будет использоваться другими командами для поиска настроек проекта.

Для работы с конфигом сделали простую библиотеку bem-config (https://github.com/bem-incubator/bem-config/) и накидали примерную структуру файла конфигурации. Файл конфигурации ищется в текущей директории и выше до корня. Используется ближайший найденный, также к нему добавляется ~/.bemconf.json.

Хотим, чтобы команда init была более умной, например, могла помимо пустого проекта создать заготовку по шаблону. Как вариант, клонировала project-stub. Сейчас это пример минимального плагина, можно использовать его для написания своего.

Следующая не менее минималистичная команда — make:

npm i bem-incubator/bem-tools-make

Просто вызывает enb :)

Ещё мы сделали прототип команды create:

npm i bem-incubator/bem-tools-create

Она поддерживает, как «классический» синтаксис bem-tools:

bem create -b b1 -t css -t js -l .
bem create -b b2 -t css -t js -l .

так и более простой:

bem create {b1,b2}.{css,js}

Есть шаблоны для технологий по умолчанию. Можно задать свои в конфиге, получаемом через bem-config. Они могут быть локальными для уровня, для проекта или браться из конфига пользователя.

Для построения имён БЭМ-сущностей используется bem-naming, для путей на файловой системе — bem-fs-scheme (пока реализована только nested схема, но легко можно добавить другие). И то, и другое можно задать в файле конфигурации.

Есть ещё что доделывать, постепенно доработаем и выпустим в рамках bem-tools 2.0.

Андрей Кузнецов и Илья Исупов написали прототип команды find (https://github.com/bem-incubator/bem-tools-find/), которая позволяет искать БЭМ-сущности и показывать их в разном виде.

Например, нам нужно найти все файлы про модификатор type для блока input:

bem find -b input -m type
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

или то же самое, но в виде дерева:

bem find -b input -m type -v tree
tree
└─┬ /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks
  └─┬ input
    └─┬ _type
      ├─┬ password
      │ ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
      │ └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
      └─┬ search
        ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
        └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

Миша Баранов делал плагин для Intellij IDEA (WebStorm, PhpStorm, etc), который будет позволять создавать БЭМ-сущности из контекстного меню (https://github.com/bem-incubator/bem-tools-intellj-plugin).

Плагин предоставляет только интерфейсную обвязку для встраивания в контекстное меню и показа диалога пользовательского ввода, а потом всё что ввёл пользователь передаёт bem create, который уже и делает всю основную работу.

Что же дальше? А дальше --Новый год-- у нас есть хитрый план: довести всё перечисленное до рабочего состояния, покрыть тестами и написать документацию. А потом... не останавливаться на достигнутом, а реализовать ещё bem rm, bem cp, bem mv, а там, глядишь, и сообщество подтянется со своими плагинами. ;)

Недавно начал изучать вёрстку и решил, в именованиях классов, применять БЭМ. Столкнулся с ситуацией, когда есть несколько функционально одинаковых блоков(блок-ссылки на посты) с небольшими визуальными отличиями - это, как я понимаю, решается с помощью модификаторов. Но у этих блоков есть элементы, а запись, вида: block_mod__elem , в "Соглашение по именованию" или "FAQ", я не нашел - ни в описании, ни в примерах. Возникает вопрос: корректна ли запись block_mod__elem ? Если - нет, то почему?

Привет,

хочу рассказать о результатах нашей команды на минувшев хакатоне в рамках Я 12-13 декабря.

Наша команда состояла из Бориса Сердюкова, Константина Гладких, Евгения Константинова и меня и в рамках хаккатона мы решили попробовать собрать бэм-проект project-stub на webpack. Забегая вперед, могу сказать, что это получилось и результат можно посмотреть здесь: https://github.com/just-boris/project-stub/blob/webpack/webpack.config.js

Так как webpack - модульный сборщик, который рассчитан на работу с JavaScript модулями и умеет подключать сторонние технологии как js-модули, то мы решили, что в качестве входной точки для сборки у нас будет статический bemjson файл, а на выходе было желание получить список реальных файлов, которые участвуют в сборке. Все вот это удалось свести к цепочке лоадеров:

{
  test: /\.bemjson.js$/,
  loader: 'bemdecl-to-fs!deps!bemjson?-stringify'
}

которые на выходе возвращают вот такой результат:

require('./libs/../b.js');
require('./libs/../b.styl');
// and etc

На мой взгляд, это довольно крутой результат, так нам удалось свести всю специфичность БЭМ методологии, связанную с депсами, к простой композиции лоадеров, что позволяет использовать стандартные решения для популярных технологий. Например, стили собрать можно как-то так: http://webpack.github.io/docs/stylesheets.html

Так как мы собирали проект на bem-core, то для JS модулей мы использовали ymodules-loader. Вопрос с шаблонизатором решили частично, остановились на bh и решили попробовать написать плагин для webpack, который будет превращать исходный bemjson в статический html, что сейчас работает.

БЭМ предметную область свели к общей декларации bem в рамках конфига, которая содержит информацию об уровнях переопределений с блоками и нужными технологиями.

Также в проекте есть webpack-dev-server, который вотчит изменения и кэширует результаты сборки.

Сам конфиг получился такой: https://github.com/just-boris/project-stub/blob/webpack/webpack.config.js Также решили сгруппировать наши технологии в рамках организации https://github.com/bempack

Скажу сразу, что текущие реализации лоадеров еще не готовы к использованию в продакшене, но мы работаем над этим. В планах, есть желание дополнить project-stub примерами с локализацией, дополнить лоадеры тестами и документацией. Также хочется поддержать шаблонизацию на bemhtml, когда это будет возможно.

В конце хочу поблагодарить ребят из тулзов и лего, которые консультировали нас по бэм-предметной области и создали довольно много интересных инструментов, которые упростили нам жизнь, и ребят из своей команды. Было весело :)

p.s. для интересующихся по webpack'у есть довольно хороший скринкаст: https://learn.javascript.ru/webpack-screencast

Добре!

Есть идейка продвинуть застоявшиеся анклавы задач в БЭМ проектах.

Может организуем хакатончик с одной целью сделать за сутки задачи которые давно подвисли на проектах БЭМ?

Нужены будут кураторы из мантейнеров проектов И конечно добровольцы!

Кто за?

Хотел бы создавать блоки и элементы с помощью bem create в терминале.

Например, $ ./node_modules/.bin/bem create -l desktop.blocks -b hello Выдает ошибку bash: ./node_modules/.bin/bem: Нет такого файла или каталога

Нужно организовать параметры фильтрации данных поместив их filter-block как Яндекс Маркете. Как это можно реализовать?

Делаю свой первый проект с использованием bemtree. При разработке блоков в контексте страницы возникает сложность в отношении того, куда правильно прописывать deps. Например есть файл основного блока, допустим он называется content с элементом column в него включается блок sidebar c элементом item и блок title c элементом level Можно прописать все deps в файле основного блока content, а можно раскидать зависимые deps элементов по вложенным блокам. Как правильно прописать deps в данном случае? Есть ли какая-то последовательность записи блоков и элементов или главное, чтобы они были вызваны?

({
    shouldDeps: [
       { elems: ['column'] }, { elems: ['side'] }, { elems: ['border'] }, 'sidebar', 'title'
    ]
})

Планируется ли переход bem-core на нативные браузерные промисы? По сведениям caniuse уже 68% Браузеров имеют реализацию promise из коробки. Есть ли смысл использовать их, а если их нет, то в качестве полифила подключать vow?

Если есть причины почему не стоит так делать - хотелось бы услышать ваше мнение.

Привет!

Выпустил новый плагин для ENB, который ведет себя, как DefinePlugin для webpack: ищет в коде бандла плейсхолдеры с названием переменных и заменяет их на соответствующие значения.

Например, можно выводить отладочную информацию в dev-окружении, а при сборке в продакшен полностью удалять этот код за счет того, что код вида

if (false) {
    console.log('debug info');
}

полностью вырезается оптимизаторами вроде uglify-js.