Как использовать deps.js файл

Форум /

Всем привет! Начал писать небольшой скрипт (т.к. подобного не смог найти), который на основе html файлов генерирует мне dep.js файл со всем используемыми блоками/элементами. Вот я получил такой файл:

exports.deps = [
{ block: 'b-layout', elem: 'content' },
{ block: 'b-layout',  elem: 'content',  modName: 'align',  modVal: 'center' },
{ block: 'b-logo' },
{ block: 'b-auth-form' },
{ block: 'b-form' },
{ block: 'b-form', modName: 'stretch', modVal: true },
{ block: 'b-form', elem: 'content' },
{ block: 'b-form', elem: 'title' },
{ block: 'b-form', elem: 'controls' },
{ block: 'b-form', elem: 'control' },
{ block: 'b-input' },
{ block: 'b-input', modName: 'size', modVal: 'xl' },
{ block: 'b-button' },
{ block: 'b-button', modName: 'type', modVal: 'primary' },
{ block: 'b-button', modName: 'size', modVal: 'xl' },
{ block: 'b-button', elem: 'text' },
{ block: 'b-form', elem: 'footer' },
]

Конечный результат я получил с помощью библиотеки bem-naming. Но там не совсем корректно устанавливаются ключи для модификаторов. Собственно в этой issue как раз об этом говорится. Я не совсем понял что там в комментариях решили по этому поводу, поэтому пришел сюда. Чем я могу собрать свои css/js файлы используя полученный deps.js? Или я пошел в какие-то дебри и решение на основе обычных html файлов уже есть?

10 years ago

qfox

Если что — то вот: https://gist.github.com/narqo/5419385

Если html-файлы у тебя вместо bemhtml — то можно сделать простую технологию, которая будет генерировать bemhtml из твоих html (?).

Либо я вообще не понимаю, что хочется сделать.

10 years ago

Guria

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

10 years ago

tadatuta

@kuflash Есть вот такая наколеночная фигня для генерации BEMJSON из HTML: https://www.npmjs.com/package/html2bemjson (а дальше уже из BEMJSON можно получить deps.js).

Пример использования:

var html2bemjson = require('html2bemjson');

try {
    var bemjson = html2bemjson.convert(html);
} catch(e) {
    console.log(html2bemjson.convert(html));
    throw e;
}

console.log('(' + JSON.stringify(bemjson, null, 4) + ')');

10 years ago

kuflash

@zxqfox, синтаксис deps.js я знаю. У меня есть шаблоны такого плана (scala.html, используется в play-framework):

@(loginForm : Form[Application.LoginForm])

@main(pages.login.loginStyles())(pages.login.loginJsLibs())(pages.login.loginHeader())(pages.login.loginFooter()) {
    <div class='b-layout__content b-layout__content_align_center'>
        <div class="b-logo"></div>
        <form class='b-auth-form b-form b-form_stretch'action='@routes.Application.auth' method='post'>
            <fieldset class='b-form__content'>
                <legend class='b-form__title'>Войдите в систему</legend>
                <div class='b-form__controls'>
                    <div class='b-form__control'><input  class='b-input  b-input_size_xl'  type='text' id='login' name='login' value='@loginForm("login").value' placeholder="Логин" required='required'/></div>
                    <div class='b-form__control'><input  class='b-input  b-input_size_xl'  type='password' id='password' name='password' autocomplete='off' placeholder="Пароль" required='required'/></div>
                    <div class='b-form__control'><button class='b-button b-button_type_primary b-button_size_xl' type='submit'><span class="b-button__text">Войти</span></button></div>
                </div>
            </fieldset>
            <footer class='b-form__footer'></footer>
        </form>
    </div>
}

Так вот на основе этого файла я хочу собрать все необходимые css/js файлы. Но для сборки с помощью bemtools/enb, как я понял, необходим файл deps.js. Вот я и задался целью написать скрипт, который на основе такого html шаблона мне генерирет файл deps.js

10 years ago

kuflash

@tadatuta, вот это уже очень интересно. Проверю, будет ли работать на моих шаблонах. Тогда такой еще вопрос. Как то мерджить bemjson файлы можно? Просто у меня страница разбита на несколько файлов/кусков, и если я буду каждый файл отдельно прогонять с помощью вашей библиотеки, то для каждого куска будет создаваться свой bemjson. Или проще будет склеить css/js после сборки каждого куска?

10 years ago

qfox

@Guria Ааа...! Спасибо ;-)

@tadatuta мне думается, что тут проще bemdecl собирать, зачем bemjson?

@kuflash Я бы взял наколеночную штуку @tadatuta, переписал бы её, чтобы на выходе получалось bemdecl, и его бы скармливал в enb. Т.е. задача, имхо, сводится к написанию одной-двух технологий для bem-tools/enb.

upd bemdecl как раз удобно мержить

upd2 https://github.com/hemantic/html2bemdecl вот еще нашлось

10 years ago

kuflash

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

10 years ago

tadatuta

@zxqfox, ты прав, конечно, но у меня такого готового модуля не оказалось, так что чем богаты ;)

зато теперь я знаю про модуль от @hemantic :)

10 years ago

Guria

@tadatuta утащить ссылку в инструменты на bem.info следует

10 years ago

tadatuta

@Guria Да, на самом деле есть огромное количество всякого полезного в дикой природе, что мы все никак не оформим на bem.info :( Рано или поздно обязательно все соберем и причешем.

Чтобы оставлять комментарии, необходимо авторизоваться.