bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Дайте ссылку на сайт сделанный на полном БЭМ стеке с исходными файлами #624

Open mathetes opened 9 years ago

mathetes commented 9 years ago

Научился немного ставить сборки и писать маленькие блоки на БЭМ. Теперь думаю как разобраться с большим объемом кода. Для этого хотел бы посмотреть страничку с исходными файлами для разработки, чтобы посмотреть как все реализовано изнутри. Пока не могу понять. Если описывать каждый тег в bemjson потом в bemhtml кажется очень объемно.

tadatuta commented 9 years ago

Полный стек полному стеку друг, товарищ и рознь ;) Могу предложить https://github.com/vithar/bem.info

aimuzov commented 9 years ago

А как же это, @tadatuta ?

Опираясь на статью про bem-full-stack и репозиторий с bem-site-engine стало понятнее как можно использовать bem на backend'е. Есть еще bem-yana, но он устарел.

tadatuta commented 9 years ago

@Immuzov нууу... туда, конечно, тоже смотреть можно, но код там далек от идеального примера для подражания, к сожалению.

mathetes commented 9 years ago

При установке bem.info с помощью npm i пошли ошибки. Как можно пофиксить? /home/roman/allApps/01_BEM/bem.info

bem.info@1.0.0 pre /home/roman/allApps/01_BEM/bem.info rm -rf output-{en,ru} && mkdir -p output-{en,ru} && cp content/robots.txt content/favicon.ico output-en && cp content/robots.txt content/favicon.ico output-ru

cp: указанная цель «output-en» не является каталогом

npm ERR! Linux 4.2.0-14-generic npm ERR! argv "/home/roman/.nvm/v4.1.2/bin/node" "/home/roman/.nvm/v4.1.2/bin/npm" "run" "pre" npm ERR! node v4.1.2 npm ERR! npm v2.14.4 npm ERR! code ELIFECYCLE npm ERR! bem.info@1.0.0 pre: rm -rf output-{en,ru} && mkdir -p output-{en,ru} && cp content/robots.txt content/favicon.ico output-en && cp content/robots.txt content/favicon.ico output-ru npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bem.info@1.0.0 pre script 'rm -rf output-{en,ru} && mkdir -p output-{en,ru} && cp content/robots.txt content/favicon.ico output-en && cp content/robots.txt content/favicon.ico output-ru'. npm ERR! This is most likely a problem with the bem.info package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! rm -rf output-{en,ru} && mkdir -p output-{en,ru} && cp content/robots.txt content/favicon.ico output-en && cp content/robots.txt content/favicon.ico output-ru npm ERR! You can get their info via: npm ERR! npm owner ls bem.info npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/roman/allApps/01_BEM/bem.info/npm-debug.log

npm ERR! Linux 4.2.0-14-generic npm ERR! argv "/home/roman/.nvm/v4.1.2/bin/node" "/home/roman/.nvm/v4.1.2/bin/npm" "i" npm ERR! node v4.1.2 npm ERR! npm v2.14.4 npm ERR! code ELIFECYCLE npm ERR! bem.info@1.0.0 postinstall: [ "$NODE_ENV" != 'production' ] && npm run deps || true && npm run compile-stylus && npm run pre npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bem.info@1.0.0 postinstall script '[ "$NODE_ENV" != 'production' ] && npm run deps || true && npm run compile-stylus && npm run pre'. npm ERR! This is most likely a problem with the bem.info package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! [ "$NODE_ENV" != 'production' ] && npm run deps || true && npm run compile-stylus && npm run pre npm ERR! You can get their info via: npm ERR! npm owner ls bem.info npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/roman/allApps/01_BEM/bem.info/npm-debug.log

tadatuta commented 9 years ago

Похоже, что нужно руками создать output-en и output-ru и перезапустить npm run postinstall

// cc @vithar

vithar commented 9 years ago

Похоже не сработала подстановка

rm -rf output-{en,ru} && mkdir -p output-{en,ru}

Попробуйте

rm -rf output-en output-ru && mkdir -p output-en output-ru

mathetes commented 9 years ago

Попробовал rm -rf output-en output-ru && mkdir -p output-en output-ru Помогло. Установка через npm i прошла без ошибок Теперь при старте с gulp ругается на отстутвие файлов. Добавлял их вручную не помогло.

gulp [16:49:29] Using gulpfile ~/allApps/01_BEM/bem.info/gulpfile.js [16:49:29] Starting 'watch'... [16:49:29] Finished 'watch' after 16 ms [16:49:29] Starting 'browser-sync'... bs [16:49:29] Finished 'browser-sync' after 70 ms [16:49:29] Starting 'default'... [16:49:30] 'default' errored after 962 ms [16:49:30] Error: Cannot find module './desktop.bundles/index/index.bemtree.js' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (module.js:286:25) at Module.require (module.js:365:17) at require (module.js:384:17) at Gulp. (/home/roman/allApps/01_BEM/bem.info/gulpfile.js:31:17) at module.exports (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at /home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/index.js:279:18 at finish (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8) events.js:141 throw er; // Unhandled 'error' event ^

Error: ENOENT: no such file or directory, open 'desktop.bundles/index/index.min.css' at Error (native) roman@roman-S300CA:~/allApps/01_BEM/bem.info$ gulp [16:51:26] Using gulpfile ~/allApps/01_BEM/bem.info/gulpfile.js [16:51:26] Starting 'watch'... [16:51:26] Finished 'watch' after 17 ms [16:51:26] Starting 'browser-sync'... bs [16:51:26] Finished 'browser-sync' after 46 ms [16:51:26] Starting 'default'... [16:51:26] 'default' errored after 492 ms [16:51:26] Error: Cannot find module './desktop.bundles/index/index.bemhtml.js' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (module.js:286:25) at Module.require (module.js:365:17) at require (module.js:384:17) at Gulp. (/home/roman/allApps/01_BEM/bem.info/gulpfile.js:31:47) at module.exports (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/index.js:214:10) at /home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/index.js:279:18 at finish (/home/roman/allApps/01_BEM/bem.info/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8) events.js:141 throw er; // Unhandled 'error' event ^

Error: ENOENT: no such file or directory, open 'desktop.bundles/index/index.min.css' at Error (native)

vithar commented 9 years ago

Попробуйте запустить руками enb make до gulp.

mathetes commented 9 years ago

Сделал enb make А он пишет, а нету такого. Можно его поставить глобально?

Команда 'enb' не найдена, возможно вы имели в виду: Команда 'nb' из пакета 'nanoblogger' (universe) Команда 'wnb' из пакета 'wordnet-gui' (universe) Команда 'ebb' из пакета 'texlive-binaries' (main) Команда 'hnb' из пакета 'hnb' (universe) Команда 'env' из пакета 'coreutils' (main) Команда 'ent' из пакета 'ent' (universe) Команда 'tnb' из пакета 'pvm-examples' (universe) Команда 'erb' из пакета 'ruby' (main) enb: команда не найдена

vithar commented 9 years ago

Глобально не надо ставить.

Надо добавить node_modules/.bin в PATH .

mathetes commented 9 years ago

Сделал node_modules/.bin/enb make Построение осуществляется. Файлы появились в desktop.bundles. Запускаю gulp Using gulpfile ~/allApps/01_BEM/bem.info/gulpfile.js [22:14:15] Starting 'watch'... [22:14:15] Finished 'watch' after 17 ms [22:14:15] Starting 'browser-sync'... bs [22:14:15] Finished 'browser-sync' after 45 ms [22:14:15] Starting 'default'... [22:14:16] Finished 'default' after 569 ms fs.js:60 throw err; // Forgot a callback but don't know where? Use NODE_DEBUG=fs ^

Error: ENOENT: no such file or directory, open 'output-ru/methodology/key-concepts//index.html' at Error (native)

tadatuta commented 9 years ago

Проблему подтверждаю, поправим

vithar commented 9 years ago

Исправил, проверяйте.

mathetes commented 9 years ago

Полностью удалил bem.info Заново клонировал. Сделал установку npm i При старте gulp получаю

[15:52:48] Using gulpfile ~/allApps/01_BEM/bem.info/gulpfile.js [15:52:48] Starting 'default'... [15:52:48] Starting 'init'... [15:52:49] Finished 'default' after 1.56 s 15:52:49.713 - build started 15:52:49.735 - [rebuild] [desktop.bundles/index/index.bemdecl.js] file-provider 15:52:49.738 - [failed] [desktop.bundles/index/index.levels] levels 15:52:49.739 - [failed] [desktop.bundles/index/index.files] files 15:52:49.739 - [failed] [desktop.bundles/index/index.deps.js] deps 15:52:49.739 - [failed] [desktop.bundles/index/index.bemtree.js] bemtree 15:52:49.739 - [failed] [desktop.bundles/index/index.bemhtml.js] bemhtml 15:52:49.739 - [failed] [desktop.bundles/index/index.css] css 15:52:49.739 - [failed] [desktop.bundles/index/index.browser.js] browser-js 15:52:49.739 - build failed 15:52:49.739 - [failed] [desktop.bundles/index/index.min.css] borschik 15:52:49.739 - [failed] [desktop.bundles/index/index.min.js] borschik 15:52:49.740 - build failed

vithar commented 9 years ago

npm i выполнился без ошибок?

Какое окружение?

Если запустить enb make перед gulp ошибка есть?

mathetes commented 9 years ago

npm i без ошибок Окружение? Что вы имеете в виду?

node_modules/.bin/enb make

15:52:59.258 - build started 15:52:59.283 - [rebuild] [desktop.bundles/index/index.bemdecl.js] file-provider 15:52:59.286 - [failed] [desktop.bundles/index/index.levels] levels 15:52:59.287 - [failed] [desktop.bundles/index/index.files] files 15:52:59.287 - [failed] [desktop.bundles/index/index.deps.js] deps 15:52:59.287 - [failed] [desktop.bundles/index/index.bemtree.js] bemtree 15:52:59.287 - [failed] [desktop.bundles/index/index.bemhtml.js] bemhtml 15:52:59.287 - [failed] [desktop.bundles/index/index.css] css 15:52:59.287 - [failed] [desktop.bundles/index/index.browser.js] browser-js 15:52:59.288 - build failed 15:52:59.289 - [failed] [desktop.bundles/index/index.min.css] borschik 15:52:59.289 - [failed] [desktop.bundles/index/index.min.js] borschik 15:52:59.289 - build failed Error: ENOENT: no such file or directory, scandir '/home/roman/allApps/01_BEM/bem.info/libs/bem-core/common.blocks' at Error (native) at Object.fs.readdirSync (fs.js:813:18) at module.exports.inherit.load (/home/roman/allApps/01_BEM/bem.info/node_modules/enb-bem-techs/lib/levels/level.js:212:28) at /home/roman/allApps/01_BEM/bem.info/node_modules/enb-bem-techs/techs/levels.js:112:38 at Array.map (native) at /home/roman/allApps/01_BEM/bem.info/node_modules/enb-bem-techs/techs/levels.js:111:42 at Array. (/home/roman/allApps/01_BEM/bem.info/node_modules/enb/node_modules/vow/lib/vow.js:202:56) at Immediate.callFns as _onImmediate at processImmediate as _immediateCallback

vithar commented 9 years ago

Версия node, npm? Какая ОС?

vithar commented 9 years ago

Судя по этой ошибке

Error: ENOENT: no such file or directory, scandir '/home/roman/allApps/01_BEM/bem.info/libs/bem-core/common.blocks'

не установилась bem-core через bower в npm run deps.

Покажите, пожалуйста, ВЕСЬ вывод npm i на чистой установке.

mathetes commented 9 years ago

Все заработало. Еще раз установил из дома. На работе есть блокировка некоторых портов. Возможно из-за этого, что-то не доустановилось. Сделал еще bower i, но ничего не написалось после этого. Как бы и не нужно вроде в этой сборке. Страница автоматически открылась в браузере. Наслаждаюсь лего фоном. Пошел ковырять бем код. Спасибо.

vithar commented 9 years ago

Ну и хорошо.

Там настроен browsersync, можно просто редактировать код, а в браузер изменения будут подтягиваться автоматически.

mathetes commented 9 years ago

Посмотрел bem.info Как я вижу сайт сделан без bemjson. Хотя как я понимаю с него начинается декларация блоков на основе BEM Прошу дать ссылку на проект сделанный с использованием bemjson

Например, я начал тренироваться на переносе сверстанной мной страницы на бэм проект. Но пока не понимаю как сделать ссылку в меню. block : 'nav', mods : { theme : 'islands', size : 'm' }, content : [ { block : 'nav__item', content : 'Item1' },

vithar commented 9 years ago

bem.info сделан на основе BEMJSON, его генерирует bemtree.

В каждом блоке есть соответствующий bemtree, который генерирует BEMJSON для него. Он обрабатывается потом BEMHTML.

mathetes commented 9 years ago

Какие-то проблемы с кодировкой последнего поста. Русский текст у меня не читается. Сервисы по декодированию не справляются.

vithar commented 9 years ago

Обновил комментарий.