Как правильно отдать верстку на сервер после сборки bem-tools

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

На сервере все запросы идут в публичный корень, где обрабатываются и вызывают нужную мне страницу, т.е все запросы идут на site.com/index.php.
Но пути в css бандлов после генерации bem-tools у меня выглядят примерно следующим образом:


.block-a
{
    background: url("../../block/block-a/bg.gif");
}

Какие возникают проблемы:

1) Пути вроде ../../ мне не подходят, т.к они выходят из корня htdocs
2) Что делать с технологиями блоков, которые мне не нужны в htdocs, все что мне от блоков нужно после сборки это картинки, а файлы вроде css, js, bemhtml мне не нужны, т.к все уже собрано

С первым пунктом я могу конечно заменить все ../../ на нужный мне путь, но как быть со вторым пунктом - это надо пробежаться по всем блокам и удалить все кроме картинок?

Как вообще правильно с этим работать?

вари борщик

1) пути можно будет заменить на абсолютные или даже зафризенные

2) папки блоков для сервара будут не нужны

aleksei-polyakoff2014

По поводу второго пункта - а куда складывать картинки?

aleksei-polyakoff2014

А борщик вроде как сам варит в bem-server.

aleksei-polyakoff2014

Правильно я понимаю, что при разработке на БЭМ я пользуюсь бэм сервер, а после того как все готово я запускаю уже просто борщик и создаю нужную мне сборку?

если напишешь примерно такой конфиг:

{

"paths": {

"./": "/"

},

"freeze_paths" : {

"./": "./static/"

}

}

то вся статика (включая картинки) будет фризиться и складываться в эту папку, а в css все пути сами поменяются как надо.

Отдаваться, соответственно будет по site.com/static/

Может быть, не пользуюсь

Скорее всего он используется в помощь технологиям для склейки минификации и т.д. А если хочешь фризить статику или html/css/js... то скорее всего надо юзать отдельно самому.

В принципе, да, bem-server он для разработки. Когда надо чтобы всё было готово, запускаешь сборку проекта целиком в продакшен режиме, а потом поверх запускаешь борщик и всё остальное, что захочется.

aleksei-polyakoff2014

Все же никак не пойму куда класть сам файлик .borschik в папку с блоками или в папку с бандлами?

Примерно в корень проекта

Скорее всего туда, где лежит папка .bem

посмотрите https://github.com/generalov/project-stub/tree/stas.js . это скелет проекта с костылями, для сборки статических страниц. цели сборки (разарботка, продакшен) рулятся в GNUMakefile, там же переключается конфиг борщика (точнее симлинка на директорию с целевыми конфигами, где лежит конфиг борщика).

aleksei-polyakoff2014

Ого, круто. А как ты такие репы ты находишь?

создаю)

aleksei-polyakoff2014

generalov === funca

правельней тогда generalov == funca

alexbaumgertner

Делал решение, может пригодится
https://github.com/alexbaumgertner/bem-static-build

aleksei-polyakoff2014

"Запускается из project-stub/desktop.bundles/merged
после прогона bem make desktop.bundles/merged/_merged.css desktop.bundles/merged/_merged.js"

Поясни для чего нужна команда > bem make desktop.bundles/merged/_merged.css desktop.bundles/merged/_merged.js

Как я себе представляю, то нужно просто запустить bem make, а в make.js должна быть информация о создании merged бандла:


MAKE.decl('BundlesLevelNode', {

    buildMergedBundle: function() {
        return true;
    },
});

И тогда появится merged бандл

борщик работает из коробки в bem make / server, чтобы настроить фриз достаточно просто положить конфиг .borschik в корень проекта.

борщик работает из коробки в bem make / server, чтобы настроить фриз достаточно просто положить конфиг .borschik в корень проекта, при необходимости картинки будут фризиться налету.

с радостью приму пулл-реквест с фавиконом и robots.txt в ветки master и bem-core

favicon понятно. я стянул этот символ со страницы bem.info, чтобы не вводить в продакшеновую сборку дополнительных условий для не встречающегося на практике кейса с отсуствующей иконкой и избавиться от 404 в логах bem server. пул-реквесты https://github.com/bem/project-stub/pull/23 https://github.com/bem/project-stub/pull/24

robots.txt сомнительно. он специфичен структуре сайта, продакшеновому конфигу борщика и сам по себе ни какой самостоятельной ценности не имеет. зачем он там такой? комплексный же пулреквест - вместе с конфигами борщика, и костылями в GNUMakefile, вводящими понятия "стурктура сайта", "продакшен" / "разработка" - будет нести какой-то совсем отдельный смысл. действительно-ли все эти примочки нужны именно в таком вот виде?

> generalov == funca

ReferenceError: generalov is not defined

с остальным и правда не совсем ясно. буду думать, может быть, внедрим в bem-tools команду для установки симлинки в зависимости от окружения — хочется поддержать винду и избавиться от необходимости в GNUmake для сборки.

favicon влил, спасибо большое!

alexbaumgertner

Поправил сборку -- теперь она запускается одной командой и из корня проекта. https://github.com/alexbaumgertner/bem-static-build

aleksei-polyakoff2014

Не понятно как выбрать все картинки, которые указаны в html. Как вы с этим справлялись?

aleksei-polyakoff2014

А как правильно теоритечески собрать проект борщиком?

Как делаю я:

1) Во всех бандлах у меня указаны пути до css и js из merged бандла

2) Провожу через борщик HTML файлы с настройками заморозки ресурсов, в результате у меня складываются все картинки, css и js файлы в нужную папку + в самом html я вижу ссылки на эти самые ресурсы

3) Провожу через борщик получившиеся из пред. пункта CSS файлы с настройками заморозки реурсов, в результате в туже папку складываются дополнительные картинки + ссылки из css на эти ресурсы

Вроде как все хорошо должно получиться, но проблема возникает на 3-м пункте, когда я указываю в качестве цели и в качестве результата одно и тоже имя css файла, то в итоге он получается пустой, например > borschik -i i/name.css -o i/name.css - в результате i/name.css создается пустым

Я не могу указать другое имя выходного файла, т.к путь до него указан в сборке после того как я прогнал html файл через борщик

Подскажите, что я делаю не так, спасибо

Как на счёт полной заморозки вместо 3-го пункта?

http://ru.bem.info/articles/borschik/ в самом конце статьи

Если положить в корень проекта конфиг борщика и собирать проект с помощью bem-tools, то третий пункт разрулится автоматически, вызывать отдельно борщик не нужно.

Ну и, пожалуй, есть смысл сделать технологию сборки html, чтобы и с html не приходилось ничего дополнительно делать руками. Займусь, когда выпадет минута.

alexbaumgertner

То есть, картинки контента (которые в bemjson)? Я их просто кладу в /merged/img, а в каждой папки бандла делаю симлинк (наример /desktop.bundles/img) -- чтобы они по /desktop.bundles/index/index.html открывались

aleksei-polyakoff2014

Выглядит костыльно, но тоже вариант

aleksei-polyakoff2014

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

aleksei-polyakoff2014

Не совсем понятно, что мне делать с получившимся файлом freeze-info.json

В нём полезная информация, на случай какой-то динамической генерации. Если 2м пунктом поменяли пути к css и js файлам, то просто игнорируй freeze-info.json.

aleksei-polyakoff2014

Проблема в том, что нужно все css файлы которые получились в результате прогона html файла через борщ(пункт 2), также надо обработать борщем, для того чтобы зафризить картинки из него, но как я писал раньше не могу это сделать, т.к получается пустой файл

Если сначала сделать полный фриз (пути в ксс поменяются), а потом фриз html (пути на эти ксс поменяются).

В какой момент проблема? )

aleksei-polyakoff2014

Можешь написать более детально как это сделать?

Мне просто не понятно что надо сначала фризить, что потом и т.д

разве при сборке с помощью bem make, борщик фризит ресурсы - есть какой-то флажок? мне кажется он только ссылки рерайтит

кажется, если для технологий css и js указать только -i , а -o не указывать, тогда борщик нормально перезапишет оригинальный файл.

aleksei-polyakoff2014

Борщик выполняет все что указано в .borshik, независимо откуда запускается и соответственно через bem make фризит тоже

aleksei-polyakoff2014

В этом случае получится все наоборот, он зафризит все ресурсы, которые были указаны в css и js, а сам файлик не создается и соответственно эти пути нигде не будут отображены

aleksei-polyakoff2014

Вообщем полная беда сборки билда html + css + img без работы напильником(

хм. можешь посмотреть, что делаю не правильно? я добавил отдельные правила для заморозки css и js в GNUmakefile только потому, что после bem make пути в них не зафризены

make dist

в конфиге .borschik секция про фриз имеется.

aleksei-polyakoff2014

Во первых не особо понимаю, что значит не фризятся пути, правильно я понимаю, что ты имел ввиду не пути а сам ресурсы(технологии),

Во вторых как мне кажется то строчка "./i/": "/i/" лишняя - эта строчка "./": "/" и так все ссылки проставит так как нужно с учетом того что во фризе указано следующее: "./": "i/"

Скинь проект я взгляну, что не так, но еще раз заверяю, что bem make работает с борщиком ровно так же как и простой запуск борщика, исключая конечно некоторые настройки, которые связаны с окружением.

aleksei-polyakoff2014

И еще вопрос, как с тобой можно связаться, ася или скайп, хочеться задать пару вопросов по поводу makefile, я его не особо понимаю, например почему выгоднее использовать предвычисление с помощью :=, а не юзать =

скайп есть, да.

я не спец по makefile. есть ощущение, что

:= выполняет правую часть и присваивает результат переменной.

= присваивает переменной выражение в правой части. оно выполняется при каждом обращении к переменной.

поэтому для констант удобнее использовать :=

?= задают дефолтные значения, позволяя переопределять в вызывающем make (верстка является частью проекта и собирается командой типа make -C static dist DISTDIR=$(STATIC_ROOT) )

e.generalov

можно счекаутить https://github.com/generalov/project-stub/tree/stas.js и выполнить make dist - сделает сборку в директорию build/* .

aleksei-polyakoff2014

Я понял что ты имеешь ввиду - css и js у тебя не фризятся - все верно, это о чем я и говорил, что сам html файл тоже нужно прогонять через борщик и только в этом случае он зафризит css и js