Доброго дня, Николай. Был на вебинаре, все очень понравилось, а главное проникся идеей БЭМ. Поэтому не откладывая в долгий ящик решил реализовать свой небольшой проект.

Вот ссылка - https://github.com/phamap/bem-card-world

Еще нашел небольшую неточность в документации. Не знаю как на маках, но ubuntu 12.04 не установились зависимости, поэтому пришлось набирать в консоли "npm run deps". Да и клонировал я обычный project-stub, поэтому сборка как на вебинаре тоже не работала) пришлось лезть в конфиг и искать чего не хватает. В остальном разработка по БЭМ проходит весело)

Супер, твою работу обязательно оценим с комментариями. Результаты будут после 23 февраля 2015 года. Ты большой молодец! p.s. Расскажи немного подробней, какие зависимости не поставились, если возможно скинь на http://gist.github.com лог. Мы постараемся пофиксить, если сможем повторить.

@phamap предположу, что ты пытался ставить зависимости под root-ом? если так, то это сознательное поведение на строне bower.

не поставились bower зависимости. да, пытался ставить под рутом. под линуксом без рута, что-то да обязательно не поставится, поэтому все, что связано с npm или node приходится через sudo ставить. кстати, решение взял здесь - https://ru.bem.info/forum/issues/65/

2 февраля 2015 г., 15:53 пользователь Vladimir Grinenko notifications@github.com написал:

@phamap https://github.com/phamap предложу, что ты пытался ставить зависимости под root-ом? если так, то это сознательное поведение на строне bower.

— Reply to this email directly or view it on GitHub https://github.com/bem/bem-forum-content-ru/issues/193#issuecomment-72430296 .

##

С уважением, Алексей. http://phamap.github.io

Рекомендую ставить nodejs через nvm, тогда рут не нужен будет.

учту, спасибо)

Добавили развернутые ответы с полезными ссылками на вопросы под видео на ютубе http://youtu.be/1GWoMnYldYc

@phamap Не знаю как на U12.04, но на 14.04 и 14.10 всё с полпинка заработало

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

@phamap зато начинаешь понимать как всё устроено )

на работает команда дист dist

вот часть файла packege.json

...
  "scripts": {
    "start": "enb server",
    "postinstall": "[ \"$NODE_ENV\" != 'production' ] && bower-npm-install || true",
    "deps": "bower-npm-install --non-interactive",
    "dist": "YENV=production enb make dist -n"
  },
...

вот файл борщика

{
    "freeze_paths": {
        "img/**" : "dist/_",
        "**/*blocks/**": "dist/_"
    },

    "paths": {
        "./dist/_" : "_"
    }
}

при запуске enb run dist вываливается только помощь по использованию

$ enb run dist    

  Usage: enb [options] [command]

  Commands:

    make [options]         build specified targets
    server [options]       run development server
    help                   displays help about techs
    *                     

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

а вот так - npm run dist ?)

@phamap что-то я не заметил ))

Но сейчас другая возникла проблема

$ npm run dist

> bem-project-stub@1.0.0 dist /home/sergey/projects/soprof
> YENV=production enb make dist -n

10:53:48.748 - build started
10:53:48.750 - build failed
Error: Target not found: dist
    at Error (<anonymous>)
    at TargetNotFoundError (/home/sergey/projects/soprof/node_modules/enb/lib/errors/target-not-found-error.js:11:23)
    at module.exports.inherit._resolveTarget (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:392:15)
    at /home/sergey/projects/soprof/node_modules/enb/lib/make.js:409:36
    at Array.forEach (native)
    at module.exports.inherit._resolveTargets (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:408:21)
    at module.exports.inherit.buildTargets (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:442:35)
    at module.exports.inherit.build (/home/sergey/projects/soprof/node_modules/enb/lib/make.js:556:35)
    at /home/sergey/projects/soprof/node_modules/enb/lib/cli/make.js:28:37
    at Array.0 (/home/sergey/projects/soprof/node_modules/enb/node_modules/vow/lib/vow.js:202:56)

npm ERR! bem-project-stub@1.0.0 dist: `YENV=production enb make dist -n`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the bem-project-stub@1.0.0 dist script.
npm ERR! This is most likely a problem with the bem-project-stub package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     YENV=production enb make dist -n
npm ERR! You can get their info via:
npm ERR!     npm owner ls bem-project-stub
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 3.16.0-30-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "run" "dist"
npm ERR! cwd /home/sergey/projects/soprof
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/sergey/projects/soprof/npm-debug.log
npm ERR! not ok code 0

может я что пропустил?

• добавил файл борщика
• добавил команду
• запустил команду

@belozyorcev а откуда у тебя в project-stub такой package.json? Ты его переписывал? Т.к. в оригинальном файле ничего про дист не сказано. Dist можно собрать в bem-components и bem-core, а в project-stub его еще настроить нужно. Да и что тебе в нем собирать?

@belozyorcev если речь о моей сборке, то я поменял .enb/make.js и package.json для того чтобы все работало. помимо блока scripts в package.json были добавлены еще несколько дополнительных зависимостей, после этого собрано все заново.

@belozyorcev Чтобы собирать dist, тебе нужно не только добавить команду в package.json и конфиг борщика, нужно еще добавить таск в enb конфиг. Вот тут 2 коммита, где добавляется возможность сборки диста, раз и два

@tavriaforever спасибо :)

хорошо было бы, чтобы оно в комплекте уже шло )

@belozyorcev кажется, что для project-stub ты не должен хотеть собрать dist, а скорее то, что мы называем merged-bundle.

см. https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md

@tavriaforever Николай , объясни мне пожалуйста, если у нас модификатор отвечает за внешний вид , почему мы пишет тогда стили не для модификатора при миксе. Яркий пример тому кнопки, вместо того чтобы задать какой то модификатор, Вы делаете микс и стилизуете элемент какого-то блока к примеру так : user__name , это как - то в корни расходиться с понятием БЭМ.

@Rahnar модификатор отвечает не только за внешний вид, но и за состояние блока. Опиши, плз, пример поподробней. Но если я правильно понял, то ты о примере типа

{
    block : 'image',
    mix : { block : 'user', elem : 'icon' },
    ...
}

Тут сделано именно миксом, чтобы выполнился шаблон блока image. И это не расходится с БЭМ.

@sipayRT Не могу понять , в каких случаях стилизуют по миксу , в каких по элементу , в каких по модификатору.

Пересмотрел кучу видео , одни просто создают блок на уровне проекта, и туда кладут стили для кнопки без использования модификатора. button button.css Другие стилизуют по миксу аля

{
   block: 'name',
   mix: { block : 'header',  elem: 'search-name'}
}

типа этот блок является вложенным блоком , блока header другие это лепят так

{
   block: 'name',
   mods: { block : 'searching'}

}

потом по модификатору стилизуют.

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

так стилизуют все кнопки для текущего проекта

Другие стилизуют по миксу аля

так стилизуют элемент блока

другие это лепят так потом по модификатору стилизуют.

так стилизуют блок/элемент в определённом состоянии

Всё зависит от задачи и контекста.

@Guria Благодарю. Просто в документации нигде это не написанно.

@tadatuta на project-stub я делаю интерфейс модуля и мне нужно получить его сборку для вставки в существующий проект на yii (php 5.2). Я прочитал про merged bundle и не совсем уверен, что это то, что нужно. (может я не так понял его назначение и как использовать)

Перейти на nodejs пока не можем.

@belozyorcev если речь про проект на yii, то скорее всего действительно нужен именно dist.

Про сборку dist нужно понимать следующее. Его сборка ничем не отличается от сборки обычного бандла, но с дополнительным первым шагом, на котором декларация bemdecl.js создается динамически по интроспекции файловой системы (итерируемся по всем блокам, элементам и модификаторам и создаем на их основе bemdecl).

Пример описания сборки dist-а есть в bem-components.

Ещё есть небольшое руководство по сборке dist-а: https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-dist.md

Еще есть книжка по теории множеств ;-)

Пока больше всего подошёл способ предложенный @tavriaforever :) А со своми конфигами разберусь позже :)

Всем привет!

Хочу представить на суд общественности свою работу: https://github.com/oozywaters/Halcyon

Здесь представлена верстка случайного HTML-шаблона, найденного на просторах интернета, с применением БЭМ-технологий. В проекте задействован фреймворк bootstrap, а также некоторые jQuery-плагины для создания прикольных анимированных штук :)

круто) как раз хотел проект на БЭМ и bootstrap попробовать, а тут живой пример) если не секрет, сколько ушло на разработку такой страницы?