Если картинка - часть оформления, то проще добавить в папку блока через стили. Если картинка - часть контента, можно просто прописать полный путь к ней. Уже не суть важно где она лежит. У меня это папка media в корне проекта. Если это на CMS какой то будет, то будет из БД просто url вставляться.

картинка есть часть оформления, и в том и был вопрос, если делать как часть оформления и на уровне переопределения блока image её положить, то как это будет выглядеть в коде? куда надо ссылаться в attrs:{src: 'image.svg'} ???

@sosnovskyas Для правильного рерайта урлов следует использовать borschik.

Схема примерно такая:

1. В корень проекта кладется конфиг .borschik (имя начинается с точки). Например, такой:

{
    "freeze_paths" : {
        "libs/**": ":base64:",
        "libs/**/*.svg": ":encodeURIComponent:",
        "*.blocks/**": ":base64:",
        "*.blocks/**/*.svg": ":encodeURIComponent:"
    }
}

заинлайнит все картинки прямо в CSS.

1. В конфиге сборки добавляется дополнительный этап либо по предобработке bemjson.js, либо по постобработке HTML (по аналогии с CSS/JS).
2. После этого может потребоваться запустить enb make clean, чтобы сбросить кэш.

@sosnovskyas если картинка часть оформления, её не надо вставлять как image, а прописывать в css как background.

И использовать borschik для фриза статики в css.

а где почитать про предобработку bemjson.js не дадите ссылочку? а то что то google не подсказывает (

@sosnovskyas обработка bemjson.js ничем не отличается от обработки любого другого JS-файла.

Расскажу чуть подробнее, чтобы объяснить идею.

borschik — это тул, который умеет запускать так называемые «технологии» — собственные модули, работающие каждый со своим форматом файлов (например, *.css или *.js). Технологии умеют всего 2 вещи: include (заменить путь до файла на его содержимое) и link (правильно преобразовать путь).

В данном случае нужен link для технологии css. Документация на него тут, но все сводится к тому, что вызов borschik.link('path/to/file') будет зафрижен в соответствии с конфигом.

Конкретно для фриза bemjson.js на примере project-stub и сборки на ENB потребуется вот такой дифф в make.js:

diff --git a/.enb/make.js b/.enb/make.js
index 8c226f3..d23b882 100644
--- a/.enb/make.js
+++ b/.enb/make.js
@@ -41,7 +41,8 @@ module.exports = function(config) {
             // essential
             [enbBemTechs.levels, { levels: levels }],
             [techs.fileProvider, { target: '?.bemjson.js' }],
-            [enbBemTechs.bemjsonToBemdecl],
+            [techs.borschik, { sourceTarget: '?.bemjson.js', destTarget: '_?.bemjson.js', freeze: true, minify: false }],
+            [enbBemTechs.bemjsonToBemdecl, { source: '_?.bemjson.js' }],
             [enbBemTechs.deps],
             [enbBemTechs.files],

@@ -58,7 +59,7 @@ module.exports = function(config) {

             // bemhtml
             [techs.bemhtml, { devMode: process.env.BEMHTML_ENV === 'development' }],
-            [techs.htmlFromBemjson],
+            [techs.htmlFromBemjson, { bemjsonFile: '_?.bemjson.js' }],

             // client bemhtml
             [enbBemTechs.depsByTechToBemdecl, {

Тут мы добавляем дополнительный шаг, на котором borschik из ?.bemjson.js с вызовами borschik.link() сделает _?.bemjson.js, где они уже превращены в правильные урлы в соответствии с конфигом и используем его для генерации HTML.

Далее необходим собственно сам конфиг Борщика в корне проекта.

Ну и тогда в bemjson.js можно делать так:

{
    block: 'image',
    url: borschik.link('my-image.svg')
}

я тут не до конца понял предназначение, ведь enb это и есть сборщик, зачем сборщик для сборщика? или эта иерархия необходима? или end не научить пути фризить в файлах технологий?

enb управляет сборкой. Например, как gulp сам по себе ничего не делает, также и enb

А без enb никак не обойтись? Нет ли примера конфига для bem make чтобы в bemjson.js можно было делать так:

{
    block: 'image',
    url: borschik.link('my-image.svg')
}

а как ты обойдёшся? тебе в любом случае тогда альтернативный сборщик нужен будет. поменяешь шило на мыло

т.е. сам по себе bem-tools (команда bem make), без enb, не может использовать borschik в bemjson, да?

@seroy bem-tools вполне может заменить ENB в данном случае, но в новой версии bem-tools@0.10.0 мы поддержали оба типа конфигов: старые и для ENB, так что если нет каких-то веских причин продолжать использовать старый конфиг для bem make, мы рекомендуем мигрировать на ENB-конфиги. Для этого достаточно просто заменить .bem/make.js на .enb/make.js.

Если же такой переход по какой-то причине невозможен, помогу с написанием конфига для bem make.

@tadatuta А есть ли аналогичное bemjson.js решение для bh.js файлов? Другими словами, хочется чтобы и внутри шаблонов можно было использовать конструкцию borschik.link('my-image.svg').

Например, имеется файл с содержимым:

module.exports = function (bh) {
bh.match('grid__cell_format_mode', function(ctx) {
    var data = ctx.param('data');
    if (!data) {
        return;
    }
    ctx.content({
        block: 'icon',
        cls: 'grid__cell_format_mode-link',
        url: '/common.blocks/grid/__cell/images/' + data + '.png'
    });
});

};

Как правильно изменить url: '/common.blocks/grid/__cell/images/' + data + '.png', и какие дополнителные настройки внести в файл .enb/make.js? Хочется чтобы ссылка переписывалась и замораживалась борщиком по аналогии с ссылками в css и js файлах.

Присоеденяюсь к вопросу Несовсем понятно где хранить саму картинку и путь до нее в css

Такая структура файлов

|desktop.blocks
| |-logo
| | |-__image
| | | | logo__image.css
| | | | logo__image.png

CSS

.logo__image {
    background-image: url(/desktop.blocks/logo/__image/logo__image.png);
}

в файле .borschik следующий код

{
 "freeze_paths" : {
     "*.blocks/**/*.png":  ":base64:"
 }
}

Все верно? Борщик подключается, но ссылку не меняет на base64 кодировку

Возможно ли так же как-то парсить все папки блоков и элементов, искать в них файлы картинок, и копировать в корневую папку проекта images

Всем привет!

Чтобы в ENB обработать url к картинке совсем не обязательно использовать borschik.

Объясню на примере. Есть блок logo. Картинка logo.png — это часть его реализации, поэтому её удобно разместить в исходных файлах блока, рядом с CSS-файлом.

desktop.blocks/
  logo/
    logo.css
    logo.png
desktop.bundles/
  index/
    index.bemjson.js

В CSS-файле пишем относительный путь (относительного самого CSS-файла):

.logo {
    background-image: url(logo.png);
}

Ожидаем получить HTML-файла в index бандле. В BEMJSON просто указываем блок logo:

{
    block: 'page',
    styles: [{ elem : 'css', url : 'index.css' }],
    scripts: [{ elem : 'js', url : 'index.js' }],
    content: [
        { block: 'logo' }
    ]
}

Для сборки воспользуемся пакетом enb-stylus. Пример .enb/make.js файла:

var stylusTech = require('enb-stylus/techs/stylus'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // Получаем имена файлов (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, levels: ['blocks']],
            [bemTechs.deps],
            [bemTechs.files]
        ]);

        // Создаем CSS-файлы
        node.addTech(stylusTech);
        node.addTarget('?.css');
    });
};

В результате получим файл desktop.bundles/index/index.css:

.logo {
    background-image: url("../../desktop.blocks/logo/logo.png");
}

У такого решения может быть проблема постави: нельзя скопировать папку desktop.bundles/index, т.к. CSS-файл требует наличия файла из desktop.blocks.

Чтобы такой проблемы не было можно «заинлайнить» картинку: записать её в код CSS-файла в формате base64. Для этого следует воспользовать опцией url со значением inline.

var stylusTech = require('enb-stylus/techs/stylus'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // Получаем имена файлов (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, levels: ['blocks']],
            [bemTechs.deps],
            [bemTechs.files]
        ]);

        // Создаем CSS-файлы
        node.addTech([stylusTech, {
            url: 'inline'  // <--- включаем «инлайнинг» каритнок
        ]);
        node.addTarget('?.css');
    });
};

В результете получим CSS, который не требует наличия исходных файлов:

.logo {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABPElEQVQ4y2NgGDTg3fdf/LjE+47fLajbf6Nx3vmHCTAxDPX+K89shClABvqzDl9gmHLmP8O0C/8ZJp7877Dg6H75SfsezLvwOAlFof22x6dAChI2nJ8PM/3c8w8GDEse/2dY8w6BF97/z7/mxefzr744oRgw7/bnOrCCOTf+C3TvegcyKH/PzSkomqF4/ZMfFf///+dBMcBhzbWjcEUrX4ENYph55T82A4BABCOwzr/9Eca/4d1nbBqQscGej7exxgLISXWXv8wnZMi8O18acUblviefw/V3vL2Nz3agRRI4DQBK8p97+zMq4OjnQ9g0v//51x5nIgKFukDHtncMnXv/M8y/jaI5/vSXbSDNQAuYcdnMDMQa59//Tqi7+m0hDM+7/6Pz3pc/4SA5nJrRAxKI5ZGwBBCzMwxqAADz8kerOr7ibwAAAABJRU5ErkJggg==");
}

Спасибо большое за подробный ответ!

@blond, подключили, все работает, кроме

  node.addTech([stylusTech, {
            url: 'inline'  // <--- включаем «инлайнинг» каритнок
        ]);

Стайлус подключен, работает, обрабатывает styl, создает css, сжимает его, но директива url: 'inline' не инлайнит картинки В какую сторону рыть?

@PAND-or какая версия пакета enb-stylus? Нужна v2.0.0.

Какой размер у картинок? По умолчанию нужно меньше 14kb.

Что будет если сбросить кэш -rm -rf .enb/tmp или пересобрать без учёта кэша enb make --no-cache?

@blond Спасибо! Скачали project-stub и в нем версия была меньше второй Обновили enb-stylus все работает!