bem-site / bem-forum-content-ru

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

Правильно собрать проект (enb) #277

Open Drekrosh opened 9 years ago

Drekrosh commented 9 years ago

Привет, друзья! Вот и закончил я свой сайт, по технологии БЭМ. И мне не хватает последнего - это собрать проект. Я в корни не понимаю как это сделать, где можно почитать , как правильно это делать? Что собственно делал я? Ввел такую команду (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: Вопрос о сборке , особой важности.. Спасибо!

tadatuta commented 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. Далее их можно подключать по-разному, но я бы рекомендова использовать такой подход:

  1. Создать БЭМ-блок в качестве обертки над jQuery-плагином.
  2. Задеклалирвать его как обычный 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/

Drekrosh commented 9 years ago

@tadatuta Спасибо , Владимир! По поводу project-stub, ставил командой yo bem-app, я сейчас попробую обновить генератор.

tadatuta commented 9 years ago

@Rahnar у генератора 19 версий вышло: https://github.com/bem/generator-bem-stub/releases

Drekrosh commented 9 years ago

@tadatuta Сделал как Вы сказали, все получилось. Единственное не получилось с папкой и картинками. Я создал файлик .borschik вставил туда то, что выше. И ничего не произошло..

tadatuta commented 9 years ago

Возможно, конфиг был сгенерирован не последней версией генератора? Должно быть так: https://github.com/bem/project-stub/blob/bem-core/.enb/make.js#L92-L94

Drekrosh commented 9 years ago

@tadatuta Конфиг на последней версии, в общем пришлось все руками делать. Это ужасно , если честно... У меня щас след проект и там 15 страниц, делать по БЭМ буду. И тут уже не прокатит так... А как-нибудь можно собрать в таком порядке , чтобы в итоге, сложилось в папку build, в ней скрипты в scripts , css в папку с css.

tadatuta commented 9 years ago

@Rahnar вручную делать точно не стоит. я помогу настроить сборку, но если не секрет, какую задачу решает перекладывание собранных css и js в отдельные папки, если их всего-то по одному файлу на выходе после сборки?

Drekrosh commented 9 years ago

@tadatuta У меня просто выхода не было, мне надо было быстренько показать директору, ему ждать меня и пока сборщик сделаю не хотелось. А вот по поводу складывания по папкам, стили , скрипты и прочего. Это в общем товарищи из бэкенда условили , чтобы я им такую архитектуру из папок представил.Они хотят чтобы у них все по полочкам было. Мне хотя бы понять как собрать фотки из сущностей в папочку img , потому что попытки мои , были безрезультатными. Бог с ним, с этой иерархией для скриптов и прочего, я все равно сделаю так как положенно, не буду ничего закидывать в папки. Сделаю в едином ключе. Еще есть такой вопросики: 1) когда я создам страницу новую в desktop.bundles например contact - скрипты подключать из папки index ? 2) я когда открыл файлик _index.js там очень много чего написанно было, я так понимаю это для использования i-bem.js, я пока его не использую , пишу на ваниле. Можно ли это как-то убрать , все что там написанно? Потому что там около 1000 или даже более строк лишнего кода. Хотя i-bem.js постараюсь разобрать в ближайшее время. 4) Очень важный вопрос, это использование ангулара. Как это можно сделать? Или использовать генератор generator-bem-ng от товарищей из Альфа-Банк? Собственно это единственное чего пока я не понял. Спасибо!

Guria commented 9 years ago

@Rahnar i-bem скорее всего тянется за счёт блока page и/или bemhtml шаблонов. Это можно попробовать исправить с помощью переопределения части блоков и их зависимостей. Кроме того, скорее всего в index.js также конкатенируется в начало модульная система ymodules, которая вам скорее всего пока не нужна. Для исправления этого понадобится правка конфига сборщика.

Для использования ангуляра надо просто попробовать начать его использовать. В БЭМ нет ничего, что мешает его использовать. Генератор для этого тоже не обязательно использовать.

Проще всего если вы выложите ваш проект с конфигами и минимальным примером того как вы создаёте страницы, чтобы можно было подсказать, что с этим сделать в вашем случае.

Drekrosh commented 9 years ago

@Guria Я скину проект - касаемо ангулара , но чуток позже, но скину обязательно. Щас вот с картинками разберусь и все.

tadatuta commented 9 years ago

@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

Drekrosh commented 9 years ago

@tadatuta У меня все получилось, спасибо! Единственное не пойму , зачем он картинкам имена меняет? Я сохранил с именем 1.jpg , а на выходе, получил в папке img (lMmIQ3aOXdBf1SMU5vsfSwbcHU.jpg) кракозябру)) Так должно быть? Вот еще заметил, я так полагаю, картинки которые подключаются в тег img не подлежат фризу? Я для теста кинул в папку page 2 картинки , та которая в стилях подключалась , попала после make, в папку с img , другая , которая вставлялась в тег img , не попала после сборки в папку.Или такие вот картинки , лучше сразу сбрасывать в папку img и от туда подключать?

tadatuta commented 9 years ago

@Rahnar да. «кракозябры» — это хешсумма от контента картинок. это нужно для того, чтобы сервер мог выставлять заголовки кэширования на максимально длительный срок, а разработчик не задумывался об инвалидации кэша.

qfox commented 9 years ago

Угу. :+1: вот такая штука

Drekrosh commented 9 years ago

@tadatuta Теперь понятно.Благодарю, Владимир!Спасибо , за огромный труд и помощь. Спасибо всем, кто помогал и не был равнодушным.

Drekrosh commented 9 years ago

@tadatuta Стал настраивать сейчас объединенные бандлы. Ошибку выдает. Собственно, что делаю. 1) Создал я нужную папку (merged). 2) Скопировал туда из всех bundles index.bemdecl.js и contact.bemdecl.js 3)Создал там файл merged.bemdecl.js закинул содержимое index и contact, по сути там все одинкого. 4) Скопировал в ./enb make.js тот скрипт который был дан. 5) Собственно все. Что могу делать не правильно?

tadatuta commented 9 years ago

@Rahnar нужно было сделать только 4), все остальное скрипт делает автоматически

Drekrosh commented 9 years ago

@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)
Drekrosh commented 9 years ago

Ребят, уже почти сутки сижу , никак не разберу merged. То ли , тот туториал (https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md), уже не подходит к новой версии project-stub, либо я делаю что-то ни так. Уже и сам писал, копипастил код который был там... Кто-нибудь уже делал? К сожалению , мало инфы про это , мне не понятно..

blond commented 9 years ago

@Rahnar привет!

Кажется, что в туториале тупо опечатка, и ошибка возникает именно поэтому. Вместо tech.provideBemdecl на 76 строке надо techs.provideBemdecl.

Drekrosh commented 9 years ago

@andrewblond Приветствую! К сожалению, ошибка все равно осталась. Самое удивительное, что папку то он создает , а вот дальше прерывается..А у Вас , получалось делать такую настройку?Оставил это дело до выходных. Если разберусь , напишу в чем проблема была. Может кому - то поможет, не словить такой же батхерт.

qfox commented 9 years ago

@Rahnar надо комментировать по очереди все технологии, начать с /Users/R/Topfloat-mobile/.enb/make.js:23:24 — строки 23. Когда начнет выдавать другую ошибку — проверить что там добавляется и починить. Если другая ошибка после этого сохранится — разбираться с ней, или суда прислать.

Drekrosh commented 9 years ago

@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). Я так полагаю, так быть не должно.Рано я обрадовался, что все работает ))

qfox commented 9 years ago

@Rahnar Да, конечно не должно. Если я скажу, что для merged бандла нужно (для простоты) создать отдельную папку бандлов — я угадаю в чем дело?

Drekrosh commented 9 years ago

@zxqfox так она и так отдельная. у меня идет index/ test/ merged/ куда собственно он складывает *.bemdecl.js всех моих бандлов. Вы об этом?

blond commented 9 years ago

@Rahnar, да так быть не должно. В руководстве описан случай, когда мы собираем merged бандл, на основе bemdecl.js тагретов, а не на основе bemjson.js.

Чтобы заработало правильно надо тут:

nodeConfig.addTechs([
    [ provide , { target: '?.bemdecl.js'} ]
]);

поменять на:

nodeConfig.addTechs([
    [provide, { target: '?.bemjson.js' }],
    [techs.bemjsonToBemdecl],   
]);

P.S. Подумаю над тем как добавить этот кейс в руководство.

Drekrosh commented 9 years ago

@andrewblond Спасибо. Интересно, туториал , документацию в Яндексе пишут специально так, чтобы потом сидеть и додумывать и допиливать самому. Типа, отгадай загадку и все заработает.

Drekrosh commented 9 years ago

@andrewblond https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md обновите тут пожалуйста, рабочий вариант. Потому-что он там не верный.Конкретно с этим блоком, который выше.

Drekrosh commented 9 years ago

@andrewblond Я поменял, тоже самое осталось.

qfox commented 9 years ago

@Rahnar А поделись, пожалуйста, конфигом, если не сложно и можно? Хотя бы куском с блоком config.nodes('*.bundles/merged', function (nodeConfig) {

Drekrosh commented 9 years ago

@zxqfox Тут кинул часть папок. Там make и внутри папки touch-phone.bandles все остальное https://github.com/Rahnar/Topfloat-mobile

Drekrosh commented 9 years ago

@zxqfox Удалось посмотреть?

qfox commented 9 years ago

https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L33 — я могу ошибаться, но этот кусок про bemdecl не будет работать с bemjson, как @andrewblond выше констатировал.

Нужно дополнительно собрать bemdecl из bemjson (techs.bemjsonToBemdecl), затем mergeBemdecl, и затем сборка.

qfox commented 9 years ago

@andrewblond https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L21 — фуфу, кстати.

qfox commented 9 years ago

@Rahnar https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L37 — вот это точно неправильно. Но как правильно не уверен, потому что если нужно [provide, { target: '?.bemjson.js' }], — то я не понимаю, как там что работает внутри и не смогу ответить точно ;-)

Drekrosh commented 9 years ago

@zxqfox Я сам уже ниче не понимаю!) А Вы сами такую штуку настраивали?У Вас получалось??

qfox commented 9 years ago

Судя по доке: 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
    }]
]);

Может так? ошибка будет какая-то?

Drekrosh commented 9 years ago

@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)
qfox commented 9 years ago

/cc @andrewblond кам хир ви нид ю плиз. https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js#L36-L44

qfox commented 9 years ago

@Rahnar получается, что если есть techs.provideBemdecl — то нужны файлы bemdecl собранные, а если их собирать из bemjson — то они параллельно провайдятся и конфликтуют...

Может если provideBemdecl убрать норм будет? Других идей нет ;) Только лезть в технологии и разбираться, что там происходит. Мб писать provideBemdeclFromBemjson...

blond commented 9 years ago

@Rahnar, если добавишь директорий touch-phone.blocks и touch-pad.blocks то у тебя всё хорошо работает же ;)

Drekrosh commented 9 years ago

@zxqfox Тоже самое. Жизнь боль.До конца недели буду решать что-то. Не хотелось бы от БЭМ отказываться, только полюбил его.Но если так дальше будет плохо...

qfox commented 9 years ago

@andrewblond А гарантии есть, что bemdecl.js будут собраны до merged?

blond commented 9 years ago

А гарантии есть, что bemdecl.js будут собраны до merged?

Да, конечно.

Drekrosh commented 9 years ago

@andrewblond В make.js добавить?Или куда конкретно?Уже голова не варит под конец раб дня.

blond commented 9 years ago

@Rahnar, на файловую систему. Рабочий вариант, это — https://github.com/Rahnar/Topfloat-mobile/blob/master/.enb/make.js.

Drekrosh commented 9 years ago

@andrewblond Все так же , отказывается собирать и видеть другие страницы.. Как избавиться от такой хрени? Error: EEXIST, mkdir '/Users/R/test-mobi/touch-phone.bundles/.DS_Store' .DS_Store - из-за файлика служебного ошибка летит в добавок.

blond commented 9 years ago

@Rahnar, странно, что ни у кого раньше проблема производилась...

Попробуй вместо:

if (bundle === 'merged') return;

Написать следующее:

if (bundle === 'merged' || bundle.charAt(0) === '.') return;
Drekrosh commented 9 years ago

@andrewblond Тоже самое. Я создал сейчас новый проект. Состоит он, только из одной desktop.bundles. Тач не брал. Внутри(desktop.bundles) index/ test/ merged/ Скопировал свой код в make.js. Поменял в массиве в самом верху на desktop, а внизу указал desktop.blocks. make запустил, все создал и собрал он. Открываю сервак , весят схемы merged и написанно (No pages are configured). Самое забавное, когда в индексе.bemjson.js что-нить создаешь , например блок. То он его в merged.bemdecl.js видит. Но саму страницу нет.

blond commented 9 years ago

@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-бандле.