Последняя версия project-stub ругается при сборке mergred если брать за основу https://github.com/bem/project-stub/tree/merged те это решение не совместимо с текущей версией project-stub.

Подскажите как сделать сборку

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

Код бандла index.bemjson.js выглядит следующим образом: index.bemjson.js

module.exports = {
    block: 'page',
    title: 'Title of the page',
    favicon: '/favicon.ico',
    head: [
        { elem: 'meta', attrs: { name: 'description', content: '' } },
        { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
        { elem: 'css', url: 'index.min.css' }
    ],
    scripts: [{ elem: 'js', url: 'index.min.js' }],
    mods: { theme: 'islands' },
    content: [
        {
            block: 'header',

        }
    ]
};

В блоке header, в файле header.deps.js я устанавливаю зависимость вида:

({

    shouldDeps: [
        {
            block: 'logo',
            mods: {theme: 'sea'}
        }
    ]
})

Соответственно блок лого существует, и у него прописаны стили. Но при сборке проекта блок header не содержит никакой вложенности. Соответственно вопрос: как добавить вложенность? Или это так не должно работать, и в любом случае в index.bemjson.js должен быть явно прописан блок внутри блока?

Собрали проект на project-stub, с использованием bemjson и bemhtml . Теперь пытаюсь все это прицепить это к php через bh.php . Есть ли возможность на лету портировать bemhtml шаблоны в php, чтоб в дальнейшем использовать их у себя на сайте?

Здравствуйте. Пытаюсь собрать блок на основе ответа от сервера через модуль http. У блока в *.bemhtml.js выполняю запрос и заполняю блок на основе ответа в callback-функции. Но сборщик не дожидается ответа и строит html дальше. Естественно блок выходит пустой. Как быть в этом случае?

var http = require('http');

var options = {
    host: 'localhost',
    path: '/TESTindex.php'
};

callback = function(response) {
    var str = '';

    //another chunk of data has been recieved, so append it to `str`
    response.on('data', function (chunk) {
        str += chunk;
    });

    //the whole response has been recieved, so we just print it out here
    response.on('end', function () {
        var items = JSON.parse(str);
        var response = [];
        for (var i = 0;i < items.length;i++) {
            item = items[i];
            response[i] = {
                title: item
            };
        }
        console.log('resp', response);
        createBlock(response);

    });
};

var createBlock = function (items) {
    console.log('1',items);
    block('testmenu').elem('content')(
        content()(function() {
            console.log('1,5');
            this.ctx.items = items;
            console.log('2',this.ctx.items);
            return this.ctx.items.map(function(item) {
             console.log('3',item);
                return {
                    elem: 'item',
                    content: [
                        {
                            elem: 'title',
                            content: item.title
                        }
                    ]
                };
             });
        })
    );
};

createBlock([
    {
        title: 'Один'
    },
    {
        title: 'Два'
    },
    {
        title: 'Три'
    }

]); // Если выполнить этот вариант, то блок строится правильно

http.request(options, callback).end(); // Если выполнить этот вариант, то в консоль выводится только '1', [....] и на этом останавливается, и блок выходит пустой.

Может кому будет интересно.

Написал модуль enb-markdown для enb. Он содержит две технологии:

• markdown — собирает файлы Markdown с уровней в бандл
• markdown-to-html — конвертирует бандл Markdown в HTML

markdown-to-html — это обёртка над пакетом markdown-bemjson, который позволяет задавать свои правила конвертации в BEMJSON. В markdown-to-html добавлена возможность пробрасывать пользовательские данные из пользовательских правил конвертации в ctx базового блока.

Мне не нужны некоторые промежуточные таргеты на файловой системе. Как я могу написать технологию так, чтобы она не записывала результат в файл, а отдавала его в следующую технологию. Например технология files не создает файлов, но предоставляет их список. Если есть что почитать кроме исходников enb буду очень благодарен за ссылку.

Добрый день. Заразился БЭМ) пока только пробую и учусь.

Хочу потестить bem-grid но без project-stub и собственно без полноценной БЭМ разработки, по простому так сказать. Установил новый модуль себе в проект: npm i --save-dev bem-grid. Подтягиваю стили из модуля, все нормально работает) Решил поменять настройки сетки, но не пойму где именно и как пересобрать новый css, какую комманду в консоли ввести? Спасибо

Доброго времени суток. Пробую начать работать с БЭМ . Решил приступить с создания собственного проекта по мануалу https://ru.bem.info/platform/tutorials/start-with-project-stub/ . На шаге сборке проекта nmp ругается и пишет в лог сл:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.10
3 info using node@v6.10.2
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle bem-project-stub@2.0.0~prestart: bem-project-stub@2.0.0
6 silly lifecycle bem-project-stub@2.0.0~prestart: no script for prestart, continuing
7 info lifecycle bem-project-stub@2.0.0~start: bem-project-stub@2.0.0
8 verbose lifecycle bem-project-stub@2.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle bem-project-stub@2.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\web\OpenServer\domains\droid\main\node_modules\.bin;C:\Users\Vadim\bin;E:\Git\mingw64\bin;E:\Git\usr\local\bin;E:\Git\usr\bin;E:\Git\usr\bin;E:\Git\mingw64\bin;E:\Git\usr\bin;C:\Users\Vadim\bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Skype\Phone;C:\Program Files\PuTTY;E:\Git\cmd;C:\Program Files\nodejs;C:\Users\Vadim\AppData\Local\Microsoft\WindowsApps;C:\Users\Vadim\AppData\Roaming\npm;E:\Git\usr\bin\vendor_perl;E:\Git\usr\bin\core_perl
10 verbose lifecycle bem-project-stub@2.0.0~start: CWD: C:\web\OpenServer\domains\droid\main
11 silly lifecycle bem-project-stub@2.0.0~start: Args: [ '/d /s /c', 'enb server' ]
12 silly lifecycle bem-project-stub@2.0.0~start: Returned: code: 1  signal: null
13 info lifecycle bem-project-stub@2.0.0~start: Failed to exec start script
14 verbose stack Error: bem-project-stub@2.0.0 start: `enb server`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:886:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid bem-project-stub@2.0.0
16 verbose cwd C:\web\OpenServer\domains\droid\main
17 error Windows_NT 10.0.14393
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.10.2
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error bem-project-stub@2.0.0 start: `enb server`
22 error Exit status 1
23 error Failed at the bem-project-stub@2.0.0 start script 'enb server'.
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 bem-project-stub package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     enb server
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs bem-project-stub
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls bem-project-stub
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Версия 4 +. Подскажите плз в чем трабла. Где я делаю не так ?

Поставил project-stub из merged ветки. В нём есть 3 места где закомментировано использование bemtree. Соответственно раскомментировал, но bemtree-файлы почему-то не подхватываются.

/desktop.bundles/index/index.html 75ms
23:25:20.359 - build started
23:25:20.366 - [rebuild] [desktop.bundles/index/index.bemjson.js] file-provider
23:25:20.367 - [isValid] [desktop.bundles/index/index.bemdecl.js] bemjson-to-bemdecl
23:25:20.370 - [rebuild] [desktop.bundles/index/index.levels] levels
23:25:20.372 - [isValid] [desktop.bundles/index/index.deps.js] deps
23:25:20.374 - [rebuild] [desktop.bundles/index/index.files] files
23:25:20.374 - [rebuild] [desktop.bundles/index/index.dirs] files
23:25:20.375 - [isValid] [desktop.bundles/index/index.bemhtml.js] bemhtml
23:25:20.375 - [isValid] [desktop.bundles/index/index.html] bemjson-to-html
23:25:20.375 - build finished - 23ms

Даже упоминания нет. Соответственно вопрос - что делать?

Добрый день!!

Не могу разобраться почему не подтягиваются зависимости задекларированные в Deps

В блоке: activities существует блок content-image с модификатором content-image_img_left

В файле activities.deps.js существует следующее содержимое:

([
    {
        shouldDeps: [
            {
                block: 'content-image',
                mods: { img: [
                        'left',
                        'right'
                    ]
                }
            }
        ]
    }
])

Пробовал по разному:

1. Имя модификатора передавать строкой в Deps
2. Модификаторы передавать массивом и прочим синтаксическим сахаром

залил проект в гитхаб Сборка ENB. При сборке Gulp - без деклараций работает, и по зависимостям (от блока) приходит то что надо. Хотя он и задекларирован только в index.bemjson

Пожалуйста помогите разобраться

Добрый вечер! Пытаюсь собрать в один файл стили своих компонентов и стили в *.post.css-файлах из bem-components. Как понимаю, для этого нужна технология enb-postcss, которую я беру отсюда: https://github.com/awinogradov/enb-postcss Я добавляют postcss в технологии:

let postCSS = require('enb-postcss/techs/enb-postcss');

module.exports = function(config) {
    config.node('bundles/index', function(nodeConfig) {
        nodeConfig.addTechs([
            ...
            [postCSS, {
                comments : true,
                sourcemap : true,
                plugins : [require('postcss')()],
                oneOfSourceSuffixes : [['post.css', 'css'], ['ie.post.css', 'ie.css']],
                target: '?.post.css'
            }]
        ]);
        nodeConfig.addTargets(['?.post.css']);
    });
};

В index.post.css получаю набор импортов в соответствии с построенным .deps.js файлом:

/* ../../libs/bem-components/common.blocks/button/button.post.css:begin */
@import "../../libs/bem-components/common.blocks/button/button.post.css";
/* ../../libs/bem-components/common.blocks/button/button.post.css:end */

/* ../../libs/bem-components/common.blocks/input/input.post.css:begin */
@import "../../libs/bem-components/common.blocks/input/input.post.css";
/* ../../libs/bem-components/common.blocks/input/input.post.css:end */

И теперь мне непонятно, куда и как мне передавать и этот файл, и stylus-файлы моих блоков, чтобы на выходе получить css-ку?

Здравствуйте! Довольно наболевшая для меня тема, вот дошли руки написать. Есть несколько вопросов по вот этой сборке: https://github.com/bem/project-stub

1. Как должен выглядеть файл make.js чтобы собирался merged bundle (самому написать пока-что представляется сложным, говорят нужно nodejs учить), что-то мне кажется инфа с bem.info про сборку merged бандла устарела. Ну и так как собирать можно не только enb, но и gulp'ом, как должен выглядеть gulpfile.js?

2. Допустим я пишу в phpStorm, в сборках более ранних версий я без проблем писал на stylus или sass. Но postCSS (.post.css || .pcss) не поддерживается в шторме (да плагинов рабочих я для него не сыскал), и следственно написание postCSS вызывается сложности в виде 100500 подчеркиваний красной волнистой ну и файлы css не понимают синтаксиса (капитан очевидность). Кто-нибудь видит адекватное решение в такой ситуации?

3. Как прикрутить к последней сборке sass вместо postcss (ну нравится мне sass/scss :) ) ???

Мне кажется было бы неплохо если бы в стандартной сборке был бы предусмотрен свитч между препроцессорами (какие человеку нравятся ну или хотябы sass||postCSS) , а так же между обычной сборкой и merged, удобно ведь было бы)

Использую postcss и bh, хочу подключить файл с переменными, общий для всего проекта. Как это правильней сделать?

UPD: Опубликовали видео.

В конце марта мы проведем второй в этом году митап по БЭМ. На этот раз встреча будет особенно актуальна для тех, кто уже использует БЭМ и смежные технологии в своих проектах.

Мы расскажем:

• О новостях БЭМ из мира React. О том как развивается библиотека bem-react-core, которая позволяет декларативно работать с React-компонентами в рамках БЭМ-методологии. Спикер Антон Виноградов.
• О сборке веб-приложений из блоков в общем и о сборке БЭМ-проектов с помощью Gulp (а, возможно, и ENB) в частности. Спикер Дима Андриянов.

BEMup пройдет в пятницу, 24 марта в московском офисе Яндекса с 19:00 до 22:00.

Регистрация уже открыта: https://events.yandex.ru/events/bemup/24-march-2017/ Присоединяйся!

Stay BEMed!

Не нашёл никакого освещения проблемы. Иногда (часто) хочется иметь доступ к свойствам иконки через css. Наиболее оптимальный способ — использование <use> (с инлайном общего SVG-спрайта в body или обращение к самому файлу через xlink:href). Т. к. при сборке страницы мы получаем .deps.js, нельзя ли использовать это для получения списка иконок, которые «соберутся» в один спрайт? Есть ли подобная технология для enb?

Прочитал документацию и возник вопрос как создать свой первый сайт по БЭМ

А конкретно работа с BEMJSON файлом и сборщиком.

Как новичку сложно разобрать пример на сайта методологии. Может кто сможет объяснить простыми словами. На примере "Hell World" Без использования полного комплекта project-stub

Думаю многим новичкам будет интересно. Как по пунктам создать сайт с фразой Hell World Используя BEMJSON и сборщик!

Нашел на форуме в одной из тем ссылку на дифф

Не понимаю пока, как осуществляется связь между обычной сборкой и сборкой merged-bundle.

Как я понял, смысл в том, чтоб собрать в одной папке все bemdecl, слить их в один файл и получить общие стили и скрипты. Привожу кусок из документации по процессу сборки

Процесс сборки

1. Какие таргеты необходимо билдить ENB узнаёт из команды enb make [target]. 
Если вы запустили enb make без указания конкретного таргета, 
ENB будет собирать все таргеты, определенные в make.js.
2. ENB инициализирует ноды, участвующие в сборке указанных таргетов. 
В это время каждая нода спрашивает у технологий 
(которые регистрировались внутри ноды) список таргетов.
3. Запускаются технологии, которые отвечают за те таргеты, которые необходимо билдить.
4. В процессе выполнения технология может потребовать у ноды другие таргеты, 
необходимые для сборки (с помощью метода requireSources). 
В таком случае технология приостанавливается, нода запускает технологии, 
отвечающие за требуемые таргеты (если они не запущены) и после того, как технологии
 заканчивают сборку нужных таргетов, продолжает свою работу искомая технология.
5. После того, как технология выполнила свою работу по сборке таргета, 
она оповещает об этом ноду (с помощью метода resolveTarget).
6. Сборка завершается после того, как все необходимые таргеты собраны.

В конфиге настраиваются ноды. В модуле '.enb/techs/merged.js' тоже настраивается нода.

...
merged(config, pathToMergedBundle); // в этом модуле исп-ся bemdecl-файлы страниц, но откуда они? Ведь их сборка идет ниже!
...

Не вижу связи между моментом сборки всех страниц (появление bemdecl-файлов) и сборки уже merged-bundle на их основе.

Привет!

Если вы используете enb-postcss (это актуально как минимум для пользователей project-stub или bem-express), то вам необходимо сделать вот такие изменения у себя на проекте https://github.com/bem/project-stub/commit/7795a5648f29343577f962b2ab1cd09dbae29071, чтобы избежать дублирования стилей в собранных бандлах.

Клонирую себе project-stub, ставлю зависимости, добавляю вторую страницу. https://ru.bem.info/toolbox/enb/enb-bem-techs/build-merged-bundle/ — копипастю код .enb/make.js (исходный — комментирую) вызываю node_modules/.bin/enb make получаю Error: Cannot find module 'enb-css/techs/css'... ставлю https://github.com/enb/enb-css как зависимость, вызываю node_modules/.bin/enb make получаю Error: file not found: D:\projects\project-stub\desktop.bundles\contacts\contacts.bemdecl.js...

Немного странно выходит: чтобы собрать merged-бандл мне нужно сначала собирать обычный (в моем случае — постраничный), потом менять код .enb/make.js? (Данублин!)

Вопросы:

1. Можно ли запускать node_modules/.bin/enb make с разными конфигами? ( .enb/make.js отдельно, какой-нибудь .enb/build.js) отдельно). Если да — как?
2. Как собрать merged-бандл для project-stub без описанных выше извращений с .enb/make.js?

1. Я сделал страницу. К ней подключена тонна JS (это не про jQuery). Что это? Как получить необходимый минимум (только функциональность использованных блоков)?
2. Как собрать результат верстки нескольких страниц в отдельную папку?
3. Как получить неминимизированный HTML?
4. Как получить один JS и один CSS файл для нескольких страниц?

Вероятно, это можно добавить в FAQ.