Open Drekrosh opened 9 years ago
@Rahnar
Куда он их вообще складывает?
В desktop.bundles/index/*
.
1) Использовал я project-stub, где выбрал не bem-tools, а enb. Но , запуск сервера почему-то, по команде npm-start не происходит, а только по bem-server. Почему так?Или так и должно быть?
Не должно быть. Точно ли используется актуальная версия project-stub
?
2) Правильно ли я делал , что складывал картинки непосредственно в папку с сущностями ? Например __item и там лежат картинки , сборщик потом сам мне закинет все картинки в папку img и пути поменяет в коде?
Да, для этого достаточно положить в корень проекта файл .borschik
(именно с точкой в начале имени) с таким содержанием:
{
"freeze_paths" : {
"libs/**": "img/",
"*.blocks/**": "img/"
}
}
создал в корневой папке проекта , папку со шрифтами , и от туда их подключаю, верно ли так поступать?
Шрифты можно класть в папку с сущностями по аналогии с картинками, borschik
сохранит пути.
Для работы с кастомными шрифтами удобно завести блока font
с модификаторами _face_my-font-family
для каждого конкретного шрифта и потом миксовать их к нужным блокам.
если мне понадобится какой-нибудь jquery плагин, который я хочу выкачивать с бовера
project-stub
поставляется с конфигом bower
, где сказано, что пакеты нужно ставить в папку libs
(и именно через bower
ставятся bem-core
и bem-components
).
Так что потребуется добавить необходимые плагины в bower.json
, сказать bower i
и они встанут в libs
.
Далее их можно подключать по-разному, но я бы рекомендова использовать такой подход:
ym
-модуль:modules.define('my-plugin', ['jquery'], function(provide, $) {
/*borschik:include:../../libs/my-plugin/my-plugin.js*/
provide($);
});
Подробнее про borschik include см. https://ru.bem.info/tools/optimizers/borschik/js-include/
@tadatuta Спасибо , Владимир! По поводу project-stub, ставил командой yo bem-app, я сейчас попробую обновить генератор.
@Rahnar у генератора 19 версий вышло: https://github.com/bem/generator-bem-stub/releases
@tadatuta Сделал как Вы сказали, все получилось. Единственное не получилось с папкой и картинками. Я создал файлик .borschik вставил туда то, что выше. И ничего не произошло..
Возможно, конфиг был сгенерирован не последней версией генератора? Должно быть так: https://github.com/bem/project-stub/blob/bem-core/.enb/make.js#L92-L94
@tadatuta Конфиг на последней версии, в общем пришлось все руками делать. Это ужасно , если честно... У меня щас след проект и там 15 страниц, делать по БЭМ буду. И тут уже не прокатит так... А как-нибудь можно собрать в таком порядке , чтобы в итоге, сложилось в папку build, в ней скрипты в scripts , css в папку с css.
@Rahnar вручную делать точно не стоит. я помогу настроить сборку, но если не секрет, какую задачу решает перекладывание собранных css и js в отдельные папки, если их всего-то по одному файлу на выходе после сборки?
@tadatuta У меня просто выхода не было, мне надо было быстренько показать директору, ему ждать меня и пока сборщик сделаю не хотелось. А вот по поводу складывания по папкам, стили , скрипты и прочего. Это в общем товарищи из бэкенда условили , чтобы я им такую архитектуру из папок представил.Они хотят чтобы у них все по полочкам было. Мне хотя бы понять как собрать фотки из сущностей в папочку img , потому что попытки мои , были безрезультатными. Бог с ним, с этой иерархией для скриптов и прочего, я все равно сделаю так как положенно, не буду ничего закидывать в папки. Сделаю в едином ключе. Еще есть такой вопросики: 1) когда я создам страницу новую в desktop.bundles например contact - скрипты подключать из папки index ? 2) я когда открыл файлик _index.js там очень много чего написанно было, я так понимаю это для использования i-bem.js, я пока его не использую , пишу на ваниле. Можно ли это как-то убрать , все что там написанно? Потому что там около 1000 или даже более строк лишнего кода. Хотя i-bem.js постараюсь разобрать в ближайшее время. 4) Очень важный вопрос, это использование ангулара. Как это можно сделать? Или использовать генератор generator-bem-ng от товарищей из Альфа-Банк? Собственно это единственное чего пока я не понял. Спасибо!
@Rahnar i-bem скорее всего тянется за счёт блока page и/или bemhtml шаблонов. Это можно попробовать исправить с помощью переопределения части блоков и их зависимостей. Кроме того, скорее всего в index.js также конкатенируется в начало модульная система ymodules, которая вам скорее всего пока не нужна. Для исправления этого понадобится правка конфига сборщика.
Для использования ангуляра надо просто попробовать начать его использовать. В БЭМ нет ничего, что мешает его использовать. Генератор для этого тоже не обязательно использовать.
Проще всего если вы выложите ваш проект с конфигами и минимальным примером того как вы создаёте страницы, чтобы можно было подсказать, что с этим сделать в вашем случае.
@Guria Я скину проект - касаемо ангулара , но чуток позже, но скину обязательно. Щас вот с картинками разберусь и все.
@Rahnar
Я взял текущий актуальный project-stub, добавил в него конфиг .borschik
из комментария выше (https://github.com/bem/project-stub/blob/borschik-demo/.borschik) и создал блок b1
с бекграундом с картиной (https://github.com/bem/project-stub/tree/borschik-demo/common.blocks/b1), результат запушил в ветку https://github.com/bem/project-stub/tree/borschik-demo
При сбоорке проекта картинка из common.blocks/b1/
фризится в img/
.
Если конфиги у тебя на проекте совпадают, то попробуй на всякий сбросить кэш сборки (enb make clean
).
По поводу оставшихся вопросов:
1) когда я создам страницу новую в desktop.bundles например contact - скрипты подключать из папки index?
Лучше использовать merged-bundle (подробнее см. https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md).
2) я когда открыл файлик _index.js там очень много чего написанно было, я так понимаю это для использования i-bem.js, я пока его не использую , пишу на ваниле. Можно ли это как-то убрать , все что там написанно? Потому что там около 1000 или даже более строк лишнего кода. Хотя i-bem.js постараюсь разобрать в ближайшее время.
Насколько я понимаю, ты не используешь никаких БЭМ-библиотек, кроме bem-core
ради BEMHTML? Если так, то проще всего просто скопировать из нее себе на проекте i-bem.bemhtml
, page.bemhtml
и ua.bemhtml
(если нужен), а библиотеки просто исключить из сборки. Ну и как верно заметил @Guria, в сборку будет попадать ym
. Чтобы от нее избавиться, можно собирать js, например, с помощью https://github.com/enb-make/enb/blob/master/techs/js.js вместо https://github.com/bem/project-stub/blob/bem-core/.enb/make.js#L85-L90
@tadatuta У меня все получилось, спасибо! Единственное не пойму , зачем он картинкам имена меняет? Я сохранил с именем 1.jpg , а на выходе, получил в папке img (lMmIQ3aOXdBf1SMU5vsfSwbcHU.jpg) кракозябру)) Так должно быть? Вот еще заметил, я так полагаю, картинки которые подключаются в тег img не подлежат фризу? Я для теста кинул в папку page 2 картинки , та которая в стилях подключалась , попала после make, в папку с img , другая , которая вставлялась в тег img , не попала после сборки в папку.Или такие вот картинки , лучше сразу сбрасывать в папку img и от туда подключать?
@Rahnar да. «кракозябры» — это хешсумма от контента картинок. это нужно для того, чтобы сервер мог выставлять заголовки кэширования на максимально длительный срок, а разработчик не задумывался об инвалидации кэша.
Угу. :+1: вот такая штука
@tadatuta Теперь понятно.Благодарю, Владимир!Спасибо , за огромный труд и помощь. Спасибо всем, кто помогал и не был равнодушным.
@tadatuta Стал настраивать сейчас объединенные бандлы. Ошибку выдает. Собственно, что делаю. 1) Создал я нужную папку (merged). 2) Скопировал туда из всех bundles index.bemdecl.js и contact.bemdecl.js 3)Создал там файл merged.bemdecl.js закинул содержимое index и contact, по сути там все одинкого. 4) Скопировал в ./enb make.js тот скрипт который был дан. 5) Собственно все. Что могу делать не правильно?
@Rahnar нужно было сделать только 4), все остальное скрипт делает автоматически
@tadatuta Сейчас я положил скрипт только в make.js (удалив старый). Теперь он создал папку merged, но все равно выдал ошибку. Сервак запускает , а потом при обновлении страницы выдает это:
TypeError: undefined is not a function
at module.exports.inherit.addTech (/Users/R/Topfloat-mobile/node_modules/enb/lib/config/node-config.js:250:34)
at /Users/R/Topfloat-mobile/node_modules/enb/lib/config/node-config.js:198:19
at Array.forEach (native)
at module.exports.inherit.addTechs (/Users/R/Topfloat-mobile/node_modules/enb/lib/config/node-config.js:197:15)
at /Users/R/Topfloat-mobile/.enb/make.js:23:24
at keepRunning (/Users/R/Topfloat-mobile/node_modules/enb/lib/config/configurable.js:50:44)
at module.exports.inherit.exec (/Users/R/Topfloat-mobile/node_modules/enb/lib/config/configurable.js:54:16)
at /Users/R/Topfloat-mobile/node_modules/enb/lib/make.js:325:48
at Array.1 (/Users/R/Topfloat-mobile/node_modules/enb/node_modules/vow/lib/vow.js:202:56)
at Object.callFns [as _onImmediate] (/Users/R/Topfloat-mobile/node_modules/enb/node_modules/vow/lib/vow.js:462:35)
Ребят, уже почти сутки сижу , никак не разберу merged. То ли , тот туториал (https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md), уже не подходит к новой версии project-stub, либо я делаю что-то ни так. Уже и сам писал, копипастил код который был там... Кто-нибудь уже делал? К сожалению , мало инфы про это , мне не понятно..
@Rahnar привет!
Кажется, что в туториале тупо опечатка, и ошибка возникает именно поэтому. Вместо tech.provideBemdecl
на 76 строке надо techs.provideBemdecl
.
@andrewblond Приветствую! К сожалению, ошибка все равно осталась. Самое удивительное, что папку то он создает , а вот дальше прерывается..А у Вас , получалось делать такую настройку?Оставил это дело до выходных. Если разберусь , напишу в чем проблема была. Может кому - то поможет, не словить такой же батхерт.
@Rahnar надо комментировать по очереди все технологии, начать с /Users/R/Topfloat-mobile/.enb/make.js:23:24
— строки 23. Когда начнет выдавать другую ошибку — проверить что там добавляется и починить. Если другая ошибка после этого сохранится — разбираться с ней, или суда прислать.
@zxqfox
Заменил строчку
nodeConfig.addTechs([
[ techs.provide , { target: '?.bemdecl.js'} ]
]);
на
nodeConfig.addTechs([
[ provide , { target: '?.bemdecl.js'} ]
]);
Все собирает и ошибок нет, но если вносить изменения например в index.bemjson.js , то он их не видит. При перезагрузки , он даже папки непересобирает. А по адресу http://localhost:8080/ показывает схемы merged , но пишет (No pages are configured). Я так полагаю, так быть не должно.Рано я обрадовался, что все работает ))
@Rahnar Да, конечно не должно. Если я скажу, что для merged бандла нужно (для простоты) создать отдельную папку бандлов — я угадаю в чем дело?
@zxqfox так она и так отдельная. у меня идет index/ test/ merged/ куда собственно он складывает *.bemdecl.js всех моих бандлов. Вы об этом?
@Rahnar, да так быть не должно. В руководстве описан случай, когда мы собираем merged
бандл, на основе bemdecl.js
тагретов, а не на основе bemjson.js
.
Чтобы заработало правильно надо тут:
nodeConfig.addTechs([
[ provide , { target: '?.bemdecl.js'} ]
]);
поменять на:
nodeConfig.addTechs([
[provide, { target: '?.bemjson.js' }],
[techs.bemjsonToBemdecl],
]);
P.S. Подумаю над тем как добавить этот кейс в руководство.
@andrewblond Спасибо. Интересно, туториал , документацию в Яндексе пишут специально так, чтобы потом сидеть и додумывать и допиливать самому. Типа, отгадай загадку и все заработает.
@andrewblond https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md обновите тут пожалуйста, рабочий вариант. Потому-что он там не верный.Конкретно с этим блоком, который выше.
@andrewblond Я поменял, тоже самое осталось.
@Rahnar А поделись, пожалуйста, конфигом, если не сложно и можно?
Хотя бы куском с блоком config.nodes('*.bundles/merged', function (nodeConfig) {
@zxqfox Тут кинул часть папок. Там make и внутри папки touch-phone.bandles все остальное https://github.com/Rahnar/Topfloat-mobile
@zxqfox Удалось посмотреть?
https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L33 — я могу ошибаться, но этот кусок про bemdecl не будет работать с bemjson, как @andrewblond выше констатировал.
Нужно дополнительно собрать bemdecl из bemjson (techs.bemjsonToBemdecl), затем mergeBemdecl, и затем сборка.
@andrewblond https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L21
— фуфу, кстати.
@Rahnar https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L37 — вот это точно неправильно. Но как правильно не уверен, потому что если нужно [provide, { target: '?.bemjson.js' }],
— то я не понимаю, как там что работает внутри и не смогу ответить точно ;-)
@zxqfox Я сам уже ниче не понимаю!) А Вы сами такую штуку настраивали?У Вас получалось??
Судя по доке: https://github.com/enb-bem/enb-bem-techs#providebemdecl https://github.com/enb-bem/enb-bem-techs#bemjsontobemdecl
https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L36-L44
var node = path.join(dir, bundle),
bemjsonTarget = bundle + '.bemjson.js',
target = bundle + '.bemdecl.js';
nodeConfig.addTechs([
[techs.bemjsonToBemdecl, {
source: bemjsonTarget,
target: target
}],
[techs.provideBemdecl, {
node: node,
target: target
}]
]);
Может так? ошибка будет какая-то?
@zxqfox
Последствия
Error: Concurrent techs for target: form.bemdecl.js, techs: "bemjson-to-bemdecl" vs "provide-bemdecl"
at Error (<anonymous>)
at module.exports.inherit._registerTarget (/Volumes/Macintosh HD 2/Work/TopFloat/Topfloat-mobile/node_modules/enb/lib/node.js:451:19)
at registerTarget (/Volumes/Macintosh HD 2/Work/TopFloat/Topfloat-mobile/node_modules/enb/lib/node.js:579:31)
at Array.forEach (native)
at /Volumes/Macintosh HD 2/Work/TopFloat/Topfloat-mobile/node_modules/enb/lib/node.js:582:40
at Array.3 (/Volumes/Macintosh HD 2/Work/TopFloat/Topfloat-mobile/node_modules/enb/node_modules/vow/lib/vow.js:202:56)
at Object.callFns [as _onImmediate] (/Volumes/Macintosh HD 2/Work/TopFloat/Topfloat-mobile/node_modules/enb/node_modules/vow/lib/vow.js:462:35)
at processImmediate [as _immediateCallback] (timers.js:354:15)
/cc @andrewblond кам хир ви нид ю плиз. https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L36-L44
@Rahnar получается, что если есть techs.provideBemdecl — то нужны файлы bemdecl собранные, а если их собирать из bemjson — то они параллельно провайдятся и конфликтуют...
Может если provideBemdecl убрать норм будет? Других идей нет ;) Только лезть в технологии и разбираться, что там происходит. Мб писать provideBemdeclFromBemjson...
@Rahnar, если добавишь директорий touch-phone.blocks
и touch-pad.blocks
то у тебя всё хорошо работает же ;)
@zxqfox Тоже самое. Жизнь боль.До конца недели буду решать что-то. Не хотелось бы от БЭМ отказываться, только полюбил его.Но если так дальше будет плохо...
@andrewblond А гарантии есть, что bemdecl.js будут собраны до merged?
А гарантии есть, что bemdecl.js будут собраны до merged?
Да, конечно.
@andrewblond В make.js добавить?Или куда конкретно?Уже голова не варит под конец раб дня.
@Rahnar, на файловую систему. Рабочий вариант, это — https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js.
@andrewblond Все так же , отказывается собирать и видеть другие страницы.. Как избавиться от такой хрени? Error: EEXIST, mkdir '/Users/R/test-mobi/touch-phone.bundles/.DS_Store' .DS_Store - из-за файлика служебного ошибка летит в добавок.
@Rahnar, странно, что ни у кого раньше проблема производилась...
Попробуй вместо:
if (bundle === 'merged') return;
Написать следующее:
if (bundle === 'merged' || bundle.charAt(0) === '.') return;
@andrewblond Тоже самое. Я создал сейчас новый проект. Состоит он, только из одной desktop.bundles. Тач не брал. Внутри(desktop.bundles) index/ test/ merged/ Скопировал свой код в make.js. Поменял в массиве в самом верху на desktop, а внизу указал desktop.blocks. make запустил, все создал и собрал он. Открываю сервак , весят схемы merged и написанно (No pages are configured). Самое забавное, когда в индексе.bemjson.js что-нить создаешь , например блок. То он его в merged.bemdecl.js видит. Но саму страницу нет.
@Rahnar, я правильно понял, что нету html файла в merged-бандле? Если так, то это ожидаемое поведение. Задача merged-бандла — собрать нужные файлы технологий (css, js), которые включают в себя блоки со всех страниц.
Нужно настроить сборку HTML на основе BEMJSON для всех страниц, кроме merged-бандла. А в страницах использовать css
и js
из merged-бандла.
Как настроить сборку страницы можно почитать тут — https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-page.md. Но из такого конфига нужно будет выпилить сборку css
и js
, т.к. они уже собираются в merged-бандле.
Привет, друзья! Вот и закончил я свой сайт, по технологии БЭМ. И мне не хватает последнего - это собрать проект. Я в корни не понимаю как это сделать, где можно почитать , как правильно это делать? Что собственно делал я? Ввел такую команду (node_modules/.bin/enb make) он чет насобирал там и выдал что финиш, но где исходные файлы , которые он якобы собрал, я не могу найти...Куда он их вообще складывает? Есть еще ряд вопросов , а именно:
1) Использовал я project-stub, где выбрал не bem-tools, а enb. Но , запуск сервера почему-то, по команде npm-start не происходит, а только по bem-server. Почему так?Или так и должно быть?
2) Правильно ли я делал , что складывал картинки непосредственно в папку с сущностями ? Например __item и там лежат картинки , сборщик потом сам мне закинет все картинки в папку img и пути поменяет в коде?
3) Теперь вопрос о сторонних папках. Я создал в корневой папке проекта , папку со шрифтами , и от туда их подключаю, верно ли так поступать?А если мне понадобится какой-нибудь jquery плагин , который я хочу выкачивать с бовера, мне надо будет создать папку bower_components в самом проекте, на одном уровне с папками common.blocks, libs и т.д ? P.S: Вопрос о сборке , особой важности.. Спасибо!