Войти с помощью github

Захотелось собрать документацию к проекту. Поставил модуль из топика, добавил конфиг в make.js по аналогии с bem-components. Доки собрались. Но

  • вообще нет стилей
  • собрался только markdown. Есть jsdoc.html но он пустой всегда, хотя в блоках есть jsdoc комменты.

Попробовал собрать доки в bem-components - то же самое. Подскажите, как собрать полную, красиво оформленную документацию к проекту, например, как на этом сайте.

Где правильнее писать стили для тега html при необходимости? Для себя пока решил написать их в common.blocks/page/page.styl Для сборки использую enb.

Что-то как-то нет описания как готовить в сборке enb при помощи enb-bem-docs документацию jsDoc3

Как с этим модулем работать?

В нашем проекте где используем БЭМ заметили интересное поведение для некоторых свойств 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"
    }
}

Приветствую! Где должны располагаться стили и какое должно быть имя файла, чтобы собрался файл index.ie.css?

Тут такое дело.

Тесты тестами, но их тоже пишут люди.

По этому частенько возникает идея через *.deps.js показать область affected.

Т.е. правлю я блок и выполняя какую-то команду enb make affected app/common.blocks/core/ - как-то вывести те блоки, которые зависят от этого.

Таким образом можно дать возможность понять, область где нагадили своим рефакторингом.

Может уже нечто подобно есть?

Хочется сделать такой шаблон BEM-сборки, который бы легко интегрировался в код сайта (с точки зрения программиста) и был оптимизирован в плане подключенных CSS/JS файлов. Речь про CMS 1С-Битрикс у которой своя система сборки/объединения статики. Вариант с merged-бандлами не рассматриваем. Для сборки используем enb + bh.

По факту нужно следующее: а) для каждой БЭМ-сущности понять перечень необходимых для ее работы статических ресурсов (включая зависимости) б) этот самый перечень включить в виде HTML-комментария в результирующей HTML непосредственно перед БЭМ-сущностью (чтобы программист знал какие файлы нужно подключить для каждого кусочка HTML)

Пример для bemjson:

{
    block : 'bl-1',
    content : [
        {
            elem : 'elem-1',
            mix : { block : 'bl-2' },
            content : [ ... ]
        }
    ]
}

получить html:

<!--
../../desktop.blocks/bl-1/bl-1.css 
../../desktop.blocks/bl-1/bl-1.js
-->
<div class="bl-1">
        <!--
        ../../common.blocks/jquery/jquery.js 
        ../../desktop.blocks/bl-1/__el-1/bl-1__el-1.js 
        ../../desktop.blocks/bl-2/bl-2.css 
        -->
    <div class="bl-1__el-1 bl-2">...</div>
</div>

Какой вариант вижу я сам: вклиниться в генерацию HTML (BH.apply), вычислять для каждого блока (с учетом миксов), генерировать комментарий и добавлять его в HTML.

Вопросы которые хочу задать:

  1. Есть ли более светлые идеи как сделать описанную задачу?
  2. Есть ли какая-то enb-технология которую можно взять за основу? Особо интересует вычисление CSS/JS необходимых для произвольного узла bemjson

Склонировал репозиторий project-stub, добавил новую технологию sass, создаю новый блок - все нормально.

Запускаю команду создания блока node_modules/.bin/bem create -l desktop.blocks -b social создается папка и в ней находится файл только что добавленной технологии

Вопрос: Как мне скомпилить sass в css и подключить вместе с блоком

Есть у меня тут в сборке одна интересная задача.

Сборка бандлов по одному модулю не может полноценно пройти без сборки других бандлов.

Так вот

Есть ли возможность у enb указать чтобы сборка одних бандлов проходила только после других?

В стандартном project-stub не указано что можно создать папку в desktop.bundles/*/blocks и блок оттуда подтянется. Где это поведение по умолчанию можно изменить?

На данный момент у меня в этой папке лежат блоки релевантные текущему бандлу. Хочу настроить сборку только этих блоков в отдельные технологии css и js.

Расскажите, пожалуйста, как можно использовать loader_type_bundle

ENB сборка ограничивает нас своими правилами в отношении нод.

Допустим, у меня есть матрица свойств для сборки, от которой будут зависить какие слои переопределения необходимо подключить к сборке. Пример матрицы:

  1. Заказчик - слои с именем заказчика имеют блоки для логики заточенной под заказчика, а так же и ряд тем
  2. Устройство - не каждое устройство должно тянуть к себе код от другого.
  3. Разрешение - не все приложения делаются резиновыми, по большей части в нашей работе приложение собирается под конкретное разрашение.
  4. Тема - это свойство очевидно многим, у нас тема определяется как набором css так и возможными изменениями поведения в js

Теперь рассмотрим ситуацию.

Как нужно сформировать бандл, чтобы учесть все эти параметры?

enb make -m dev ./bundles/client/samsung/1280x720/orange - учли все.

должны получить структуру:

bundles/client/
bundles/client/samsung
bundles/client/samsung/1280x720/
bundles/client/samsung/1280x720/orange
bundles/client/samsung/1280x720/orange/orange.css
bundles/client/samsung/1280x720/orange/orange.js
bundles/client/samsung/1280x720/1280x720.css
bundles/client/samsung/1280x720/1280x720.js
bundles/client/samsung/samsung.css
bundles/client/samsung/samsung.js
bundles/client/samsung/samsung.html
bundles/client/client.html

Но посмотрите на структуру вариаций!

И сколько мне нужно задать bemdecl.js файлов?

Когда очевидно было бы получить все зависимости только из одного.

Ах было бы прекрасно, коли была бы возможность сделать так:

enb make -m dev ./bundles/client/samsung?resolution=1280x720&theme=orange&some=1&some=2

Тогда появляется настройка сборки в очень тонких материях, и rколичество ветвлений сократилось бы на много!

bundles/client/
bundles/client/samsung
bundles/client/samsung/samsung-1280x720-orange.css
bundles/client/samsung/samsung-1280x720-orange.js
bundles/client/samsung/samsung.css
bundles/client/samsung/samsung.js
bundles/client/samsung/samsung.html
bundles/client/client.html

Конечно, в сборке ноды можно получить и параметры:

config.nodes('bundles/**/**', function (nodeConfig) {
    console.log(nodeConfig.query);
});

/// { 'resolution': '1280x720',  'theme': 'orange', some: [1,2] }

Не мне же одному уже приходит эта мысль? Наверняка уже кто-то задумывался об этом? Ведь , это так упрощает жизнь!

Кто-нибудь пробовал сделать сборку для ymodules под webpack?

Здравствуйте, пытаюсь прикрутить тесты к своим блокам.

При запуске тестов: node_modules/.bin/enb make specs

Получаю такой результат:

Failed to start mocha: Init timeout Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL.... Domains, protocols and ports must match.

Не подскажите как это можно решить ?

Как подключить enb к express, что б при изменении node.js файлов проект автоматом пересобирался?

Доброго времени суток коллеги

Необходимо вызывать такое древо

<div class="filter">
    <div class="filter__item selector selector_data_city">
        <labe class="selector__label">Choise City</label>
        <select class="selector__select select select_data_city"></select>
   </div>
</div>

Собственно 3 блока filter, в элементе которого вызывается selector с модификатором _data_city, внутри которого вызывается label и select с модификатором _data_city из блока в блок, аналогично контенту, по иерархии вниз передается data

bh.match('filter', function(ctx, json) {
ctx.content([
   elem: 'item',
   mix: {
        block: 'selector',
        mods: {data: 'city'}
       data: json.data()
   },
], true);
};

bh.match('selector_data_city', function(ctx, json) {
ctx.content([
   {
       elem: 'label',
       mix: {
           block: 'label'
      },
      content: 'Choice City'
   },
   {
     elem: 'select',
     mix: {
          block: 'select',
         mods: {data: 'city'}
         data: json.data()
     },

  }
], true);
};

bh.match('select_data_city', function(ctx, json) {
   options = MakeOptions(json.data());
   ctx.tag('select');
   ctx.content([options], true);
}

Если выполнять в однои файле, то все работает. Если разнести по методогии БЭМ в разные блоки и прописать то перестает работать наследственная связь, вызвается только filter прописав deps.js блоки вызываются, но не в правильном порядке

Если в вызове блока, вместо

     elem: 'item',
     mix: {
          block: 'selector',
         mods: {data: 'city'}
          data: json.data()
     },

использовать

     block: 'selector',
     mods: {data: 'city'}
     mix: {
          block: 'filter',
          elem: 'item'
     },
     data: json.data()

То, блоки вызываются в правильном порядке, и дата передается корректно

Объясните, почему так, и как через микс вызвать блок ПОСЛЕ блока родителя

Друзья, всем приветы. Пытаюсь собрать merged bundle по инструкции https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md В БЭМ новичок, поэтому тяжело пока понять что к чему. Но проект не собирается. Есть предложение включить сборку merged по дефолту в project-stub, чтобы такие коряги как я разобрались )

Вот мой make.js

var techs = { // essential fileProvider: require('enb/techs/file-provider'), fileMerge: require('enb/techs/file-merge'),

    // optimization
    borschik: require('enb-borschik/techs/borschik'),

    // css
    stylus: require('enb-stylus/techs/stylus'),

    // js
    browserJs: require('enb-diverse-js/techs/browser-js'),
    prependYm: require('enb-modules/techs/prepend-modules'),

    // bemtree
    // bemtree: require('enb-bemxjst/techs/bemtree'),

    // bemhtml
    bemhtml: require('enb-bemxjst/techs/bemhtml'),
    bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html')
},
enbBemTechs = require('enb-bem-techs'),
path = require('path'),
fs = require('fs'),
provide = require('enb/techs/file-provider'),
platforms = ['desktop'],
levels = [
    { path: 'libs/bem-core/common.blocks', check: false },
    { path: 'libs/bem-core/desktop.blocks', check: false },
    { path: 'libs/bem-components/common.blocks', check: false },
    { path: 'libs/bem-components/desktop.blocks', check: false },
    { path: 'libs/bem-components/design/common.blocks', check: false },
    { path: 'libs/bem-components/design/desktop.blocks', check: false },
    'common.blocks',
    'desktop.blocks'
];

module.exports = function(config) { var isProd = process.env.YENV === 'production';

// Создаем директории для merged-бандлов (1)
platforms.forEach(function (platform) {
    var node = path.join(platform + '.bundles', 'merged');

    if (!fs.existsSync(node)) {
        fs.mkdirSync(node);
    }
});

config.nodes('*.bundles/*', function(nodeConfig) {
var node = path.basename(nodeConfig.getPath());

if (node !== 'merged') {
    nodeConfig.addTechs([
        // essential
        [enbBemTechs.levels, { levels: levels }],
        [techs.fileProvider, { target: '?.bemjson.js' }],
        [enbBemTechs.bemjsonToBemdecl],
        [enbBemTechs.deps],
        [enbBemTechs.files],

        // css
        [techs.stylus, {
            target: '?.css',
            autoprefixer: {
                browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
            }
        }],

        // bemtree
        // [techs.bemtree, { devMode: process.env.BEMTREE_ENV === 'development' }],

        // bemhtml
        [techs.bemhtml, { devMode: process.env.BEMHTML_ENV === 'development' }],

        // html
        [techs.bemjsonToHtml],

        // client bemhtml
        [enbBemTechs.depsByTechToBemdecl, {
            target: '?.bemhtml.bemdecl.js',
            sourceTech: 'js',
            destTech: 'bemhtml'
        }],
        [enbBemTechs.deps, {
            target: '?.bemhtml.deps.js',
            bemdeclFile: '?.bemhtml.bemdecl.js'
        }],
        [enbBemTechs.files, {
            depsFile: '?.bemhtml.deps.js',
            filesTarget: '?.bemhtml.files',
            dirsTarget: '?.bemhtml.dirs'
        }],
        [techs.bemhtml, {
            target: '?.browser.bemhtml.js',
            filesTarget: '?.bemhtml.files',
            devMode: process.env.BEMHTML_ENV === 'development'
        }],

        // js
        [techs.browserJs],
        [techs.fileMerge, {
            target: '?.pre.js',
            sources: ['?.browser.bemhtml.js', '?.browser.js']
        }],
        [techs.prependYm, { source: '?.pre.js' }],

        // borschik
        [techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
        [techs.borschik, { source: '?.css', target: '?.min.css', tech: 'cleancss', minify: isProd }]
    ]);
}

    nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
});

config.nodes('*.bundles/merged', function(nodeConfig) {
    var dir = path.dirname(nodeConfig.getPath()),
        bundles = fs.readdirSync(dir),
        bemdeclFiles = []
    // Копируем BEMDECL-файлы в merged-бандл (3)
    bundles.forEach(function (bundle) {
        if (bundle === 'merged') return;

        var node = path.join(dir, bundle),
            target = bundle + '.bemdecl.js';

nodeConfig.addTechs([techs.provideBemdecl, {
            node: node,
            target: target
        }]);

        bemdeclFiles.push(target);
    });

    // Объединяем скопированные BEMDECL-файлы (4)
    nodeConfig.addTechs([techs.mergeBemdecl, { sources: bemdeclFiles }]);

    nodeConfig.addTechs([
        // essential
        [enbBemTechs.levels, { levels: levels }],
        [techs.fileProvider, { target: '?.bemjson.js' }],
        [enbBemTechs.bemjsonToBemdecl],
        [enbBemTechs.deps],
        [enbBemTechs.files],

        // css
        [techs.stylus, {
            target: '?.css',
            autoprefixer: {
                browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
            }
        }],

        // bemtree
        // [techs.bemtree, { devMode: process.env.BEMTREE_ENV === 'development' }],

        // bemhtml
        [techs.bemhtml, { devMode: process.env.BEMHTML_ENV === 'development' }],

        // html
        // [techs.bemjsonToHtml],

        // client bemhtml
        [enbBemTechs.depsByTechToBemdecl, {
            target: '?.bemhtml.bemdecl.js',
            sourceTech: 'js',
            destTech: 'bemhtml'
        }],
        [enbBemTechs.deps, {
            target: '?.bemhtml.deps.js',
            bemdeclFile: '?.bemhtml.bemdecl.js'
        }],
        [enbBemTechs.files, {
            depsFile: '?.bemhtml.deps.js',
            filesTarget: '?.bemhtml.files',
            dirsTarget: '?.bemhtml.dirs'
        }],
        [techs.bemhtml, {
            target: '?.browser.bemhtml.js',
            filesTarget: '?.bemhtml.files',
            devMode: process.env.BEMHTML_ENV === 'development'
        }],

        // js
        [techs.browserJs],
        [techs.fileMerge, {
            target: '?.pre.js',
            sources: ['?.browser.bemhtml.js', '?.browser.js']
        }],
        [techs.prependYm, { source: '?.pre.js' }],

        // borschik
        [techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
        [techs.borschik, { source: '?.css', target: '?.min.css', tech: 'cleancss', minify: isProd }]
    ]);

    nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
});

};

решил обновиться =)

1 // Fonts mixin
  2 font-url(file)
  3     return 'fonts/' + file
  4
  5 webfont(family, file, hack-chrome-windows = false, weight = 'normal')
  6     @font-face
  7     ¦   font-family family
  8     ¦   src url(font-url(file + '.eot'))
  9     ¦   src url(font-url(file + '.eot?#iefix')) format('embedded-opentype'), url(font-url(file + '.woff')) format('woff'), url(font-url(file + '.ttf')) format('truetype'), url(font-        ↪ url(file + '.svg#'+ family)) format('svg')
 10     ¦   font-weight weight
 11     ¦   font-style normal
 12 if hack-chrome-windows
 13     @media screen and (-webkit-min-device-pixel-ratio:0)
 14     ¦   @font-face
 15     ¦   ¦   font-family family
 16     ¦   ¦   src url(font-url(file + '.svg#'+ family)) format('svg')
 17
 18 webfont('font', 'font', false, 'normal')

падает с такими ошибками такое ошущение что функция webfont не отработала как надо

Error: No such file or directory: /Users/uradvd85/Documents/www/blog.bem/common.blocks/fonts/__icons/fonts/file.svg
  -> /Users/uradvd85/Documents/www/blog.bem/desktop.bundles/page_blog_search/page_blog_search.css
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processLink [as __base] (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/techs/css-base.js:54:27)
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processLink (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/techs/css.js:104:68)
    at null.processLink (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/inherit/lib/inherit.js:81:36)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/tech.js:138:54)
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processInclude (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/techs/css.js:97:61)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/tech.js:138:26)
    at exports.Tech.INHERIT.process (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/tech.js:34:56)
    at Cmd.<anonymous> (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/lib/coa.js:138:38)
    at /Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22
    at _fulfilled (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
➜  blog.bem git:(develop) ✗ /Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:126
                    throw e;
                          ^
Error: channel closed
    at process.target.send (child_process.js:414:26)
    at callback (/Users/uradvd85/Documents/www/blog.bem/node_modules/enb/node_modules/worker-farm/lib/child/index.js:29:17)
    at _fulfilled (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
    at self.promiseDispatch.done (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:827:30)
    at Promise.promise.promiseDispatch (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:760:13)
    at /Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:574:44
    at flush (/Users/uradvd85/Documents/www/blog.bem/node_modules/borschik/node_modules/coa/node_modules/q/q.js:108:17)
    at process._tickCallback (node.js:355:11)

Расскажите пожалуйста, как подключить пакет для PostCSS на примере Lost (вариант, установить bem-grid не предлагать). Насколько мне известно, PostCSS уже включен в последний пакет enb-stylus.

Используется enb сборщик, и yo bem stub как стартовый пакет.

Хочу получить возможность использовать LostGrid в .styl, например:

.header {
    lost-column: 2; 
}

Всем привет!

Пытаюсь разобраться в работе модуля enb-bem-i18n на примере project-stub. Для эксперимента использую блок calendar, точнее его элемент title https://github.com/Sergei-b84/calendar

{
block: 'calendar',
mods: { theme: 'ls' },
switchers: ['', '']
 },

Очередность моих действий:

  • Установил модуль следующей командой:

    npm install --save-dev enb-bem-i18n
    
    • Изменил код шаблона calendar__title.bemhtml

c

 block('calendar').elem('title')(
content()(function(){
    var monthName = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];

    var date = this._date;
    var title = monthName[date.getMonth()] + ' '  + date.getFullYear();

        return title;
    })
);

на

    block('calendar').elem('title')(
match(function () { return this.ctx.date; }).content()(function () {
    var date = new Date(this.ctx.date),
        i18n = BEM.I18N,
        month = [
        i18n('calendar__title', 'jan'),
        i18n('calendar__title', 'feb'),
        i18n('calendar__title', 'mar'),
        i18n('calendar__title', 'apr'),
        i18n('calendar__title', 'may'),
        i18n('calendar__title', 'jun'),
        i18n('calendar__title', 'jul'),
        i18n('calendar__title', 'aug'),
        i18n('calendar__title', 'sep'),
        i18n('calendar__title', 'oct'),
        i18n('calendar__title', 'nov'),
        i18n('calendar__title', 'dec')
        ];

    var title = month[date.getMonth()] + ' '  + date.getFullYear();
    return title;

     })
);

Теперь, для того чтобы все заработало, я как понимаю, мне нужно указать язык по умолчанию в каком-то конфиге и сделать какие-то изменения в .enb/make.js . Опишите, пожалуйста, подробно как это сделать на примере project-stub. ( как выглядит конфиг, куда кладем, где подключаем и какие пишем изменения в make.js) Спасибо.

Привет! Обновил enb-bem-techs@1.0.4 до версии 2.0.0 и начались проблемы со сборкой bemhml и html. Сама сборка проходит без ошибок, но по окончании сборки я имею пустой html файл и странно собранный bemhtml. Все шаблоны в нем продублированы по 2 раза. Циклические зависимости mustDeps отсутствуют в deps файлах, т.к я использую ключ strict: true

Почему html файл пустой и почему шаблоны продублированы 2 раза?

Пример сборки бандлов:

    config.nodes(bemPages, function(nodeConfig) {
        var path = nodeConfig.getPath();
        nodeConfig.addTechs([
            [ require('enb-bem-techs/techs/levels'), { levels: getLevels(config, path) } ],
            [ techs.fileProvider, { target: '?.bemjson.js' } ],
            [ enbBemTechs.bemjsonToBemdecl ],
            [ enbBemTechs.depsOld, { strict: true } ],
            [ enbBemTechs.files ],
            //CSS
            [ techs.stylus, { target: '?.css', autoprefixer: { browsers: [ "> 2%", "last 2 versions", "Firefox ESR", "Opera 12.1", "Android >= 4", "iOS >= 5" ] } } ],
            //BEMHTML
            [ techs.bemhtml, { sourceSuffixes: [ 'bemhtml', 'bemhtml.js' ] } ],
            //HTML
            [ techs.htmlFromJSON ],
            [ techs.htmlBeautify ],
            //client JS
            [ techs.browserJs ],
            [ techs.fileMerge, { target: '?.pre.js', sources: [ '?.bemhtml.js', '?.browser.js' ] } ],
            [ techs.prependYm, { source: '?.pre.js' }]
        ]);

        nodeConfig.mode('production', function(nodeConfig){
            //CSS
            nodeConfig.addTechs([
                [ techs.stylus, { target: '_?.css', autoprefixer: { browsers: [ "> 2%", "last 2 versions", "Firefox ESR", "Opera 12.1", "Android >= 4", "iOS >= 5" ] }, compress: true } ]
            ]);
            nodeConfig.addTechs([
                //BORSCHIK
                [ techs.borschik,  { sourceTarget: '?.js', destTarget: '_?.js', freeze: true, minify: true} ]
            ]);
            nodeConfig.addTargets([ '_?.css', '_?.js' ]);
        })

        nodeConfig.addTargets([ '?.js', '?.css', '?.html', '?.browser.js', '?.beauty.html' ]);
    });

В проекте используем stylus. Но возникает проблема с глобальными переменными. Хотим воспользоваться блоком page и в нём их описывать (page.styl). Однако, сделав дебаг файлов, которые попадают в технологию 'enb-stylus/techs/css-stylus', заметили, что page.styl в списке находится на последнем месте, следовательно и все переменные, которые объявленны в нём не увидит ни один блок. Подскажите, как можно поднять его в списке файлов для технологии stylus на первое место, чтобы все нижестоящие блоки (основываясь на bemjson) могли использовать его переменные? Или же какое-либо другое решение.

Не нашёл нигде документации по формату написания этого файла. Где-то пишется export.blocks, где-то export.deps. А как всё же правильно и где документация?

Спасибо.)

Всем привет. Знаю, тема заезжена, но сам никак не осилю. Пытаюсь собрать проект с enb. Для блока page в page.deps.js указываю mustDeps: { block: 'normalize' }, В файле normalize/normalize.css идёт простой инклуд css файла из libs/. И он не включаются в css файл. Что я делаю не так?

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

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

Почему часто дописывая новое свойство в препроцессор styl, у меня все ломается. Перезапуск сервера ничего не решает. Проблема иногда решается переименованием блока, и всегда решается установкой модификатора. Может есть какая-то команда для обновления стилей, а я ее пропустил, прослушивая лекции. Нехочится плодить модификаторы для общих свойств всего блока. P.S. Да и firebug это новое свойство тоже не видит.

Доброго времени!

Для создания проекта использовал «yo bem-stub». Выбранные основные технологии: bemtree, bemjson, bh. Выбранные уровни переопределения: desktop, touch-pad, touch-phone. Сборщик — ENB.

Как при описании блока «page», например, в «desktop.bundles/index/index.bemjson.js» не указывать параметр favicon, а использовать значение и ресурсы самого блока, переопределенного на уровне «common»?

Заранее спасибо за помощь!

Хотелось бы использовать внеш. либу типа selectize на проекте. Добавил на проект с помощью bower. Основные файлы теперь в libs/selectize/dist/css/selectize.css и соотв. также js. Как теперь проще всего добавить его в сборку (помимо копи-пасты)?

Пока вижу только вариант создать симлинки вида common.blocks/selectize/selectize.css -> ../../libs/selectize/dist/css/selectize.css

Добры день. У меня проблема с подключением css блока. В styl файле прописываю стили, но на выходе в _index.css получается следущее:

/* ../../libs/bem-components/common.blocks/popup/popup.styl:begin / .popup { position: absolute; } / ../../libs/bem-components/common.blocks/popup/popup.styl:end / / ../../common.blocks/popup/popup.styl:begin */ .popup { position: absolute; }

Правила не меняются. Никак. Можно разве что удалить блок.... bem make -m clean делал, .enb/tmp/ удалял. В чем может быть проблема? Подскажите пожалуйста