Спецификации технологии bundle находятся в процессе разработки. Для получения детальной информации пишите на форум.

Не расскажите планов?

Всем здравствуйте. Я совсем недавно начал изучение БЭМ технологии. Столкнулся с такой ситуацией. Попробовал перенести созданый проект с localhost на реальный сервер. Перенос сделать простым копирование всех файлов. На сервере запустил Git Bash и командой npm start запустил сервер. Вместо localhost прописалось: http://0.0.0.0:8080. Далее при переходе на свой сайт, вместо загруженной страницы выдается дерево файлов и папок проекта. А в Git Bash видно, что проект не пересобирается когда к нему обращается. Подскажите пожалуйства, в чем проблема? Может перенос и дальнейший запуск на сервере по другому осуществляется? Где можно по этому вопросу информацию почитать?

Добрый день :)

Влияет ли порядок объявления технологий в enb ? А точнее сборка происходит в порядке объявления или нет?

Добрый день. Где можно отключить минификацию html при сборке?

Может сделаем уже? @andrewblond можешь рассказать в каком состоянии модульная сборка? Кажется, что собранные депсы в один файл гарантируют возможность сборки с помощью любого сборщика любой технологии. Если продолжать писать руками депсы, то все будет хорошо) Возможно надо будет доработать депсы, чтобы было указание уровня для каждого блока. У кого какие мысли?;)

Кто-либо мог бы рассказать как управлять кэшем в enb?

Кейс такой - запускаем enb server, после изменения блока b-block, и рефреша страницы в браузере, не видно обновлений. Т.к. less не пересобрался, а подтянулся из кэша.

Как заставить всю хитрую машину с кэшем работать так как мне нужно?

Подскажите, как подкрутить перезагрузку страницы при редактировании блоков?

Если есть способ с enb, то с enb Если есть gulp, то с gulp.

@verybigman что-то похожее реализовывал. Но так, как я понял, используется api сборщика bem, а не enb.

Может кто уже делал для себя конфиги?

По что мне такое наказание?

Привет, друзья! Вот и закончил я свой сайт, по технологии БЭМ. И мне не хватает последнего - это собрать проект. Я в корни не понимаю как это сделать, где можно почитать , как правильно это делать? Что собственно делал я? Ввел такую команду (node_modules/.bin/enb make) он чет насобирал там и выдал что финиш, но где исходные файлы , которые он якобы собрал, я не могу найти...Куда он их вообще складывает? Есть еще ряд вопросов , а именно:

1) Использовал я project-stub, где выбрал не bem-tools, а enb. Но , запуск сервера почему-то, по команде npm-start не происходит, а только по bem-server. Почему так?Или так и должно быть?

2) Правильно ли я делал , что складывал картинки непосредственно в папку с сущностями ? Например __item и там лежат картинки , сборщик потом сам мне закинет все картинки в папку img и пути поменяет в коде?

3) Теперь вопрос о сторонних папках. Я создал в корневой папке проекта , папку со шрифтами , и от туда их подключаю, верно ли так поступать?А если мне понадобится какой-нибудь jquery плагин , который я хочу выкачивать с бовера, мне надо будет создать папку bower_components в самом проекте, на одном уровне с папками common.blocks, libs и т.д ? P.S: Вопрос о сборке , особой важности.. Спасибо!

Вот хочется всего и чтобы фризил и собирал мне в нужную структуру.

вот есть у меня папка bundles/index/*.*

В ней собралось все что надо, и css и js.

Теперь хочу, чтобы из этой папки мне собралась структура вот такого типа:

build/ ../css ../../img ../../../logo-sadfasdfsdfsdf234234.png ../../index-asdsdasdsdsdsd213213.css ../js ../../index-asdasdsad.js ../index.html

Как это сделать посредством enb+borschik?

Или это уже надо делать через gulp?

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

Скажите пожалуйста, вот собираю я через enb некую технологию.

И в конечном итоге все чанки собираются в один файл.

Но мне нужно добавить в этот файл код который просто обязан быть в конце собранного фала.

Как это сделать?

Вот есть функция builder https://github.com/enb-bem/enb-xjst/blob/master/techs/bemhtml.js#L101

А как добавить нечто особенное в начало или конец собираемого фала?

Поскольку мы не ищем лёгких путей, то у нас на проекте до сих пор i-bem какой-то дремучей версии и свой собственный сборщик.

Мне всё это несколько надоело и я пробую мигрировать на bem-core. Сразу сейчас прикручивать enb и вот это всё — неподъёмная задача, поэтому цепляю bem-core из бовера. И вот тут напоролся на то, что в https://github.com/bem/bem-core/blob/v2/bower.json не прописаны вообще никакие зависимости, в частности ymaps/modules.

Собственно вопрос в том, есть ли способ подключить ymodules в бовере более прямой, чем указать гит-путь?

"dependencies": {
  "modules": "git@github.com:ymaps/modules.git#0.1.0",
}

Скажите, есть ли конвертер или какой-то метод перевода из deps для bem-tools в deps для enb?

Из под bem в enb?

enb-less искал искал не нашел.

А в проекте куча less файлов.

Пришлось написать свой https://github.com/pavelpower/enb-less

Писан на основе enb-stylus.

Может кому полезно будет.

Особенность у less - большая проблема с относительными путями.

По этом пришлось чуть изменить подход - сразу читать тело файла .less и вставлять без промежуточного @imports

Это зло конечно для генерации map.

Но может будут идеи как сие обойти можно?

Помнится один замечательный пост http://clubs.ya.ru/bem/replies.xml?item_no=2807

Вопрос - может кто уже создал source map?

А то ребята не хотят работать с простыней, хотят чтобы все было разбито по полочкам.

Привет!

Захотелось пользоваться BEMHTML шаблонами на клиенте, но получается ошибка can't resolve dependence "BEMHTML". Вот как объявляется зависимость https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.js В deps вроде тоже всё прописано https://github.com/varya/varya.github.com/blob/features/github-repos/desktop.blocks/github/github.deps.js

Делаю по образу и подобию bem-components, но библиотеки у меня старые (https://github.com/varya/varya.github.com/blob/features/github-repos/bower.json). Обновляться не хочу, боюсь, что это принесет ещё больше проблем. Сборка на ENB https://github.com/varya/varya.github.com/blob/features/github-repos/.bem/enb-make.js

Как мне заставить мой bemhtml работать в браузере?

Здравствуйте , матерые бойцы методологии БЭМ ! )) Вот столкнулся с проблемой , прочел документацию узнал про bem-tools и enb и встал в ступор , че из них юзать? Потом прочел все про bemhtml все чудно! И тут ниже я прочел про bh , что использовать? Что профитнее всего ?

https://gist.github.com/ec7034b7a409c826e989 Объявил зависимость shouldDeps модификатора от другого булевого модификатора.

({
  shouldDeps:[
    { mods: { visible: true}}
  ]
})

В итоге в собранный deps.js булевый модификатор попадает дважды. До исходного модификатора:

    {
        "block": "drawer",
        "mod": "visible"
    }

После исходного модификатора:

    {
        "block": "drawer",
        "mod": "visible",
        "val": true
    }

При этом появление модификатора visible до исходного является нежелательным и неожиданным. Сборщик ENB настроенный generator-bem-stub

Потерял ссылку на GITHUB-страничку, где было полное и поступенное описание всего стека технологий. В т.ч. там было про то, как вводить свои технологии, расширяя имеющиеся, и т.д. Перерыл историю браузера, но ничего не могу найти. Если подскажете, буду рад, т.к. имеющаяся документация оставляет некие кусочки в голове, не давая сразу целой картины мира. Спасибо.

По просьбе в твиттере от @life_maniac.

Те, кто используют наши шаблонизаторы BEMHTML или BH для верстки статики, часто спрашивают, как отключить минимизацию получаемого HTML.

Но не многие знают, что на самом деле никакой минимизации не происходит.

Почему? Потому что шаблонизаторы изначально генерируют из BEMJSON оптимальный для продакшена HTML.

Если вам необходимо получать красиво отформатированный HTML, подойдет любой pritty-print, например, js-beautify.

Его можно звать через CLI (js-beautify --html) либо встроить прямо в технологию сборки через JS API.

Приведу примеры такой технологии для bem-tools и ENB (технология написана исходя из предположения, что вы используете project-stub).

bem-tools

var BEM = require('bem'),
    Q = BEM.require('q'),
    environ = require('bem-environ'),
    join = require('path').join,
    BEMBL_TECHS = environ.getLibPath('bem-bl', 'blocks-common/i-bem/bem/techs'),

    beautify = require('js-beautify').html;

exports.baseTechPath = join(BEMBL_TECHS, 'html.js');

exports.techMixin = {
    getCreateResult: function(path, suffix, vars) {
        // не вызывать js-beautify в production-режиме
        if (process.env.YENV === 'production') return this.__base.apply(this, arguments);

        return this.__base.apply(this, arguments)
            .then(function(html) {
                return beautify(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });
            });
    }
};

ENB

Для ENB приводить полный листинг не буду. Все сводится к полному копипасту html-from-bemjson.js с добавлением вызова бьютифаера на 40 строке:

var html = bemhtml.BEMHTML.apply(json);

return process.env.YENV === 'production' ? html : require('js-beautify').html(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });

Использование

Когда технологии готовы, останется лишь заменить путь к технологии в конфиге сборки:

• здесь для bem-tools
• и здесь для ENB.

PS: Не забываем установить сам модуль: npm i js-beautify --save.

Выкручиваясь в объяснениях при рассказе того, что происходит при сборке БЭМ. Нарисовал такую картинку:

bundle (начальная точка сборки) => deps.js (собираем граф) => bemdecl.js (линейная структура зависимостей) => сборка (конкатенация) => компиляция (преобразование типа less=>css)

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

app/
..css/
..../images
......logo.png
....app.css
..app.html

А собирает все обратно в блоки. При этом откровенно мешая работать над исходниками.

Пришлось написать пример с bem-tools + gulp

Где разделил понятия компиляция и сборка таким образом:

1. bem-tools компилирует файлы исходников в нужный вид раскидывая по папкам блоков
2. gulp собирает файлы из блоков в ожидаемую структуру.

Так, вот может быть стоит ввести в оборот "сборка/конкатенация файлов для компиляции", "компиляция", "сборка структуры".

Может станет понятнее новичкам?

На сегодняшний день разработка bem-tools заморожена. Подробнее об этом в заметке о статусе bem-tools, причины приведшие к такому положению вещей значение имеют второстепенную, вопрос в том что делать и как развиваться дальше.

В теме Визуальный генератор страницы из имеющихся блоков вплыл вопрос о "правлении" ENB в БЭМ-экосистеме, @zxqfox лаконично и не субъективно описал свой взгляд:

Названия технологий и их апи настолько разные, что убивают многое. У них нет зависимостей других технологий, которые стоило бы запилить. Конфиги больших проектов выглядят как какашка (см. bem-components и проекты с хакатона). Технологии жестко завязаны файловую систему и имена технологий — оба не критично, но имхо это не правильно. И это все не субъективно. Для 80% пользователей это так ;-)

1. Хочется услышать другие мнения.
2. Хочется разложить все по полочкам, а именно разложить по полочкам составляющие bem-tools и составляющие ENB.
3. Хочется понять какие есть варианты достижения счастья и консистентности.

Привет. Правильно я понимаю что на винде mode 'production' никак не позвать? Про YENV винда конечно не в курсе( Как вариант хотелось бы что-то вроде enb make --mode=production.

Привет. Хочется чтобы при сборке при помощи enb в production режиме все png и svg файлы, которые указаны бекграундами для блоков и лежат рядом с ними конвертились в base64. Самостоятельно победить так и не удалось( В промерах борщика только варианты, когда картинки лежат в /i/png, что несколько странно и противоречит методологии.

Ввиду нетривиальных конфигов enb(Возможно только для меня), не понятно как использовать BH на клиенте. Хотелось бы посмотреть примеры использования. Интересно, какова судьба BEMHTML в связи с появлением BH.

Часто структура проекта на bem выглядит как-то так:

desktop.bundles
  |--somebundle
       |--blocks
       |--somebundle.bemdecl.js

После сборки enb складывает всё что он насобирал в somebundle. Проблема в том, что в WebStorm нельзя исключить из проекта только часть директории. Кто как решает эту проблему?