Научился немного ставить сборки и писать маленькие блоки на БЭМ. Теперь думаю как разобраться с большим объемом кода. Для этого хотел бы посмотреть страничку с исходными файлами для разработки, чтобы посмотреть как все реализовано изнутри. Пока не могу понять. Если описывать каждый тег в bemjson потом в bemhtml кажется очень объемно.
Полный стек полному стеку друг, товарищ и рознь ;) Могу предложить https://github.com/vithar/bem.info
А как же это, @tadatuta ?
Опираясь на статью про bem-full-stack и репозиторий с bem-site-engine стало понятнее как можно использовать bem на backend'е. Есть еще bem-yana, но он устарел.
@Immuzov нууу... туда, конечно, тоже смотреть можно, но код там далек от идеального примера для подражания, к сожалению.
При установке bem.info с помощью npm i пошли ошибки. Как можно пофиксить? /home/roman/allApps/01_BEM/bem.info
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-runpm 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 prenpm 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
Похоже, что нужно руками создать
output-enиoutput-ruи перезапуститьnpm run postinstall// cc @vithar
Похоже не сработала подстановка
rm -rf output-{en,ru} && mkdir -p output-{en,ru}
Попробуйте
rm -rf output-en output-ru && mkdir -p output-en output-ru
Попробовал 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)
Попробуйте запустить руками enb make до gulp.
Сделал 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: команда не найдена
Глобально не надо ставить.
Надо добавить node_modules/.bin в PATH .
Сделал 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)
Проблему подтверждаю, поправим
Исправил, проверяйте.
Полностью удалил 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
npm i выполнился без ошибок?
Какое окружение?
Если запустить enb make перед gulp ошибка есть?
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
Версия node, npm? Какая ОС?
Судя по этой ошибке
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 на чистой установке.
Все заработало. Еще раз установил из дома. На работе есть блокировка некоторых портов. Возможно из-за этого, что-то не доустановилось. Сделал еще bower i, но ничего не написалось после этого. Как бы и не нужно вроде в этой сборке. Страница автоматически открылась в браузере. Наслаждаюсь лего фоном. Пошел ковырять бем код. Спасибо.
Ну и хорошо.
Там настроен browsersync, можно просто редактировать код, а в браузер изменения будут подтягиваться автоматически.
Посмотрел bem.info Как я вижу сайт сделан без bemjson. Хотя как я понимаю с него начинается декларация блоков на основе BEM Прошу дать ссылку на проект сделанный с использованием bemjson
Например, я начал тренироваться на переносе сверстанной мной страницы на бэм проект. Но пока не понимаю как сделать ссылку в меню. block : 'nav', mods : { theme : 'islands', size : 'm' }, content : [ { block : 'nav__item', content : 'Item1' },
bem.info сделан на основе BEMJSON, его генерирует bemtree.
В каждом блоке есть соответствующий bemtree, который генерирует BEMJSON для него. Он обрабатывается потом BEMHTML.
Какие-то проблемы с кодировкой последнего поста. Русский текст у меня не читается. Сервисы по декодированию не справляются.
Обновил комментарий.