Ситуация такая: использую borschik-js-include для подтянивания файлов из node_modules. Бандлы собираются - тесты (specs) не собираются. Пробовал решить ситуацию кардинально и заиспользовал browserify но столкнулся с той же самой проблемой.

Добрый вечер

Использую project stub

Ранее всю разметку писал в index.bemjson.js, сейчас же решил оставить там основную разметку, а контент и шаблонизацию вынести для каждого блока в bemhtml/bemtree в common.blocks

И, вроде бы, всё почти сложилось, сами сущности расширяются, в итоговом html в браузере я вижу все блоки, которые должны были сформироваться. Но вот стили применились только к элементам, описанным в bemjson. А блоки, описанные через bemtree оказались проигнорированы в контексте css

Я вычистил из проекта лишнее и залил сюда - https://yadi.sk/d/NeU8Hc033MSDX2

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

Использую и работаю в исходниках project-stub. Есть блок с названием advantages. У него есть элемент 'icon' с модификатором 'type'. В папке _type лежат иконки(svg) и css файлы с путями до иконок. Пример:

/* advantages__icon_type_innovation.css */
.advantages__icon_type_innovation {
    background-image: url(innovation.svg);
}

При сборке проекта и обновлении страницы, пути верные и нет ошибок. Но в иконках указан путь в формате: background-image: url(data:image/svg+xml;charset=US-ASCII......) И иконки не отображаются. Возможно ли, что не правильный способ кодирования svg и как бороться с этим? Стоит отметить, что с png всё работает.

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

Появилась необходимость собирать не только основной файл js но и подключать к нему web worker. Как Реализовать такой функционал в пределах БЭМ проекта?

Проблема довольно банальна - ссылка на картинку блока из CSS файла блока не работает. Единственный работающий вариант это:

...
background-image: url(../../common.blocks/header/images/bg-header.png)
...

Фактически это абсолютный путь к блоку, в который так-же входит и путь к папке блоков common.blocks, что на мой взгляд совершенно неверно. Т.е. если я допустим захочу вынести потом этот компонент в допустим папку blog.blocks то получается надо будет бегать и пути менять. Или переименую я блок - та-же история.

Вот такой вариант:

...
background-image: url(images/bg-header.png)
...

работать отказывается

Borschik (через enb - project-stub) чё-то как-то не помог - такой путь он просто проигнорировал. Пытался крутить конфиг .borschik но без особого успеха (но тут я сильно глубоко не рыл).

Итого вопрос - как всё-таки идеологически верно указывать пути к картинкам блока в CSS-файлах блока?

Добрый день! Внимательно прочитал всю доступную документацию в старом виде и в новом, несколько статей, посмотрел несколько вебинаров и лекций. Но некоторые моменты всё равно ускользнули от моего внимания и понимания. В целом эта непонятная ситуация причиняет мне физический дискомфорт. Боюсь, что для понимания многих вещей, придется просмотреть много кода, что бы найти примеры использования, а это камень в огород документации. Без ответа на эти вопросы, я буду плавать в методологии и не смогу ей воспользоваться.

Из документации я не понял:

1. Шаблонизация в браузере когда и зачем нужна? Я предполагаю, что весь HTML будет собираться на сервере, в том числе, что динамично будет отправляться клиенту. Но, коль есть возможность компилировать в браузере, хотелось бы узнать о плюсах и кейсах, когда это может понадобиться. Что, касательно ресурсов, насколько это ресурсозатратно?

2. Возможность частичной сборки и компиляции со статичными html файлами Многие элементы интерфейса - статичные, например, шапка, меню, футер, общие лейауты. Собирать их отдельно для каждого клиента - бессмысленно. Возможно ли как-то объединять уже собранный, статичный HTML и динамичные блоки?

3. Документация про сборку Я прочитал весь раздел про enb, но там скорее кейсы, чем сама архитектура. Мне непонятно, как организовать сборку для проекта в целом.

4. Как организовать сборку для дева, прода, лайв В продолжение предыдущего вопроса - для разработки и для прода требуются разные настройки. Я правильно понимаю, что разные настройки обеспечиваются разными файлами по типу make.js ?

5. Документация про декларацию Я не нашел цельной информации про декларацию (?.bemdecl.js), и всё, что я про это знаю - частички из статей про enb, из-за этого складывается ощущение, что я чего-то не догоняю.

_6. Почему и зачем есть BEMHTML и bh, какой для каких ситуаций лучше _ Я долго пытался понять - что делает bh, пока не понял, что это - еще один шаблонизатор, такой же, как BEMHTML. Так в чём же разница, и как так получилось, что есть два шаблонизатора? Какой из них под какие цели заточен? И, кстати, про bh нет документации.

_7. Где доки про BEMTREE, когда что лучше использовать _ Про BEMTREE лишь сказано, что синтаксис "Такой же, как в BEMHTML, но только с двумя режимами", при всём при том, что это - важный и основной инструмент при сборке. Очень хотелось бы увидеть примеры и объяснения, как делать шаблоны для BEMTREE.

8. Доки про SASS|LESS| любые модули Основной инструмент библиотеки для css - stylus, по историческим причинам. Хотелось бы узнать, как можно использовать другие препроцессоры. Я часто встречал мнение, что БЭМ - навязывает свой стек. Я понимаю, что это не так, просто инструменты дефолтные такие. Хотелось бы узнать, как можно в сборку включать те, что соответствуют моему стеку.

9. Контроллеры для сборки, практики BEM - штука хорошая, но кажется очень замкнутой в себе из-за того, что до конца не ясен сам процесс сборки и связь с внешним миром. Во всех статьях и гайдах говорится в-основном о статичных сайтах. И из-за этого, совсем мне не понятно, как сделать динамичный сайт, как организовать динамичную и частичную сборку, роутинг и т. д.

10. Шапка, лейаут в общем html Возможно, мой мозг еще не переключился в БЭМ-область, но мне до конца не ясно, как сделать общие части интерфейса для всех страниц сайта - каждый раз подключать header, content, footer?

11. Подключение скриптов, стилей, других библиотек. Если подключение своих скриптов, всё худо-бедно понять можно, то как подключить скрипты библиотек? Их ведь нужно указать в head (а некоторые скрипты в футере). Как же это всё делается в рамках шаблонов, страниц? Хардкодить?

12. Какие практики бандлов Из документации мне совсем не понятно что такое и для чего нужны бандлы. Как я понял - это собранные пакеты css и js, но куда их нужно пихать и зачем - непонятно.

13. Борщик Для чего борщик существует внутри enb, ведь в enb есть другие инструменты, для работы с файлами. В чем его отличие и назначение?

Возможно, многие вопросы очевидные или неправильно сформулированы, про неправильное пользование той или иной технологией. Каждый из этих вопросов - для меня важный, прошу, если вы знаете ответ или имеете мнение хоть по одному из них - не стесняйтесь.

Всем привет.

У меня прекрасно собирается статика стандартным способом (с помощью конфигурационного файла .borschik и некоторых изменений в .enb), когда ресурсы явно прописаны в стилях или bemjson.

Можно ли как-то с помощью борщика попробовать зафризить картинки в случае динамической сборки компонента, когда пути заранее неизвестны или навешиваются на DOM-элемент инлайн-стилями? Например, так:

block('card')(
    attrs()(function () {
        var attrs = {},
            url = this.ctx.url;
        if (url) {
            attrs.style = 'background:url(' + url + ') no-repeat';
        }
        return attrs;
    })
);

Возможно, я выбрал неправильный подход? Буду благодарен за помощь.

Проект тут: https://github.com/mikhailmakarov/zhifu-first-bem

Задача собрать всю статику и html, css, js в папку dist. Подскажите пожалуйста.

Я только начал изучать BEM. Может я что-то не правильно делаю.

Вот что в npm-debug.log при выполнении команды npm run dist:

17 error Windows_NT 6.3.9600 18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dist" 19 error node v5.1.1 20 error npm v3.3.12 21 error code ELIFECYCLE 22 error zhifu-first-bem@1.0.0 dist: YENV=production enb make dist 22 error Exit status 1 23 error Failed at the zhifu-first-bem@1.0.0 dist script 'YENV=production enb make dist'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the zhifu-first-bem package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error YENV=production enb make dist 23 error You can get their info via: 23 error npm owner ls zhifu-first-bem 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]

Можно не писать постоянно ../../.. , а например всему борщику сказать, что ищи не найденные файлы в bower_components или libs? как это сделано в postcss-import

//вместо
/* borschik:include:../../../libs/owl.carousel/dist/owl.carousel.js */
//так
/* borschik:include:libs/owl.carousel/dist/owl.carousel.js */

Трудность: Borschik не склеивает /* borschik:include:../../libs/smothScroll/js/smothScroll.js */ в один файл. Файл рабочий, пути правильные, декларация плагинов правильная.

Вопрос: Как починить борщик, если переустановка не помогает?

Предположения: У меня в проекте в папке node_modules установлено 3 борщика. Возможно они конфликтуют. borschik-tech-cleancss borschik enb-borschik

Вот весь текст

/* global modules:false */
modules.define('jquery__smothScroll', ['jquery'], function(provide, $) {
    window.jQuery = $;
    /*borschik:include:../../libs/smothScroll/js/smothScroll.js*/
    provide($);

});

Есть простой плагин прокрутки на Jquerry. )) Сейчас вот так в конце index.html:

<script src="js/plugins-scroll.js"></script>
<script>
    $(document).ready(function() {
        try {
            $.browserSelector();
            if($("html").hasClass("chrome")) {
                $.smoothScroll();
            }
         } catch(err) {
        };
    });
</script>

Как Это подключается через БЭМ? P/S: Спасибо!

Подскажите пожалуйста как круто сделать сборку, чтоб передать верстку. Dist, в котором будут сложены изображения, заменятся пути и будет красиво отформатированный HTML.

Что нужно установить? Что дописать? Какие команды запустить?

Есть два уровня переопределения, в них есть по блоку

Верхний angular.js /borschik:include:../../libs/angular/angular.js/ /borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js/

Мой блок

/borschik:include:../../libs/angular/angular.js/ /borschik:include:../../libs/angular-route/angular-route.js/ /borschik:include:../../libs/angular-resource/angular-resource.js/ /borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js/

При этому браузер сообщает ошибку "WARNING: Tried to load angular more than once." То есть верхний уровень, как-то странно переопределяется, видимо из-за сборщика. Подскажите как поступить?

Добрый день.

Начал делать проект на bem + angular. Для блока angular.js

/*borschik:include:../../libs/angular/angular.js*/
/*borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js*/
// Hello World!

В index.js скрипт подключает, но файлы не инклюдит.

/* end: ../../libs/bem-ng/common.blocks/angular/angular.js */
/* begin: ../../service.blocks/angular/angular.js */
/*borschik:include:../../libs/angular/angular.js*/
/*borschik:include:../../libs/angular-ui-router/release/angular-ui-router.js*/
// Hello World!

Все библиотеки существую и лежат в lib

Подскажите, что не так? Спасибо.

Всем привет подскажите пожалуйста, в итоговом css путь к картинке меняется на относительный путь к блоку. Например: (../../common.blocks/icon/_image/i/cart.png). В .borshik прописано "i/**": "/images/". В make.js enb следущее [borschikTech, { sourceTarget: '?.css', destTarget: '?.min.css', tech: 'cleancss', freeze: true, minify: isProd }]. Я так понимаю борщик не работает, а пути меняет сам enb?! Как это исправить?

В нашем проекте где используем БЭМ заметили интересное поведение для некоторых свойств CSS при переопределении и при семантическом объединении борщиком.

[borschik,
   techOptions: {
       semanticMerging: true
   },
//...
]

Это проявляется на старых браузерах или браузере с обрезанным функционалом.

Если свойство, к примеру background объявить в обобщенном виде, а не отдельно по параметрам, пример:

.block {
    background: url(i/arrow.png) center center no-repeat;
}

При это в дальнейшем переопределить одно из указанных свойств

.block {
    background-image: url(i/yellow-arrow.png);
}

То переопределение может сработать не корректно, и часто поведение (особенно на short-браузерах) будет похоже на гейзенбаг.

Решение пока нашли в том, что все свойства объявляем подробно:

.block {
    background-image: url(i/arrow.png);
    background-position: center center;
    background-prepeat: no-repeat;
}

Настроена сборка, css и js файлы пропускаются через borschik. Хочется чтобы внутри css .svg и .png инлайнились, а внутри js .svg и .png указанные через borschik.link ложились в папку images. Сейчас текущий конфиг такой

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

        "*.blocks/**": ":base64:",
        "*.blocks/**/*.svg": ":encodeURIComponent:",

        "*.bundles/blocks/**": ":base64:",
        "*.bundles/blocks/**/*.svg": ":encodeURIComponent:",

        "*.bundles/**/images/**": "dist/images"
    }
}

Добрый вечер. Хочу собрать проект и с путями возникает вопрос, у меня есть '../../images/' , а нужно 'images/'. Кажется, что все тривиально и глупее вопроса сложно придумать, бери да вручную их меняй:) но как-то это не солидно, ведь есть borschik, а он что-то не варится. Хотя, скорее всего, проблема в моем котелке. Настройки make.js [borschikTech, { sourceTarget: '?.html', destTarget: '?.borschik.html', freeze: true }], [borschikTech, { sourceTarget: '?.css', destTarget: '?.min.css', tech: 'cleancss', freeze: true }], [borschikTech, { sourceTarget: '?.js', destTarget: '?.min.js', freeze: true, minify: isProd }] И странно, что запись в .borschik типа {"freezepaths": { "images/**" : "img/"}} меняет только пути .css, не замечая .html. Помогите разобраться

Сделал новое открытие, борщик не умеет распознавать пути в JSON. И другие параметры начинает воспринимать как часть пути.

Получается борщик бесполезнее чем ожидалось.

Может быть я ошибаюсь, и там надо что-то подкрутить?

Может кто подскажет по чему?

[borschikJs, {
                    sourceTarget: '?.js',
                    destTarget: '_?.js',
                    techOptions: {
                        uglify: {
                            quote_style: 1
                        }
                    },
                    minify: true,
                    freeze: true,
                    noCache: true
                }]

Столкнулся с проблемой что borschik не перемещает файлы шрифтов с форматом .woff2 Это баг или фича?

Добре коллеги!

Случайно выяснил, что борщик минимизирует css как-то не очень хорошо.

Работаю с enb-borshchik

Дело в том, что он не производит семантическое объединение классов. Которое просто необходимо для тех случаев когда хотим использовать base64 в css.

Что же это такое семантическое объединение?

Рассмотрим пример:

Есть файл a.css

.a {
    left: 20px;
    background: #red;
}

.b {
    left: 1px;
}

.k .a {
    left: 20px;
    background: #red;
}

.a {
    right: 20px;
    left: 1px;
    background: url(./resources/images/1280x720-tv-background__overlay_info.png);
}

.b {
    left: 2px;
}

.k .a {
    right: 20px;
    left: 1px;
    background: url(./resources/images/1280x720-tv-background__overlay_info.png);
}

После семантического объединения должны получить следующее:

.a, .k .a{
    right:20px;
    left:1px;
    background:url(resources/images/1280x720-tv-background__overlay_info.png)
}
.b { left:2px }

Делать это умеет библиотека: https://www.npmjs.com/package/clean-css

с включенной опцией --semantic-merging

Вопрос - как решить задачу семантической сборки css для enb?

Видел, что есть

Может уже решали данную проблему до меня?