как использовать его в bem проекте вместо bemhtml?

egor-a-trubnikov-panov commented 10 years ago

Хочу создать новый бэм проект с шаблонизатором bemer вместо bemhtml. Сгенерировал через generator-bem-stub проект без bemhtml. И с одной библиотекой bem-core.

tenorok commented 10 years ago

Привет! Достаточно подключить bemer на проект любым удобным образом. Например, включить шаблонизатор в сборку или подключать отдельным файлом. Однако, в библиотеке bem-core нет шаблонов, написанных на шаблонизаторе bemer, поэтому не получится использовать блоки от туда :(

tenorok commented 10 years ago

Но, если ты хочешь быстро опробовать БЭМ, как методологию, тебе может быть достаточно всего трёх инструментов: 1) bemer — шаблонизатор 2) i-bem — библиотека для работы в браузере 3) bemaker — сборщик (есть grunt-bemaker)

При этом не придётся генерировать каркас проекта. Всё должно быть достаточно привычно.

egor-a-trubnikov-panov commented 10 years ago

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

tenorok commented 10 years ago

Устанавливаем зависимости для работы на сервере:

npm i bemaker bemer

Устанавливаем зависимости для работы на клиенте:

bower i i-bem

Для использования bemaker достаточно завести папку блоков, посмотри readme, я старался максимально подробно описать все нюансы.

Bemaker работает очень просто, он конкатенирует в нужном порядке все файлы по расширениям. То есть, если есть blocks/button/button.css и blocks/input/input.css, то bemaker соберёт их в один файл all.css с заданным именем.

Bemer подключается традиционным образом в браузере и на сервере.

Не забудь перед i-bem подключить jquery.

I-bem тоже в браузере подключается как всегда:

<script src="bower_components/i-bem/i-bem.min.js"></script>

Если будут какие-то вопросы — пиши. Удачи!

tenorok commented 10 years ago

С помощью bemaker настроена сборка библиотеки блоков bemer-components, которую я ещё не закончил.

egor-a-trubnikov-panov commented 10 years ago

Непонятно пока как сгенерировать страницу по bemjson c помощью bemer. Я так понимаю никакого плагина для грант еще нет ?

В bemaker вместо deps.js используется JSDoc прописаный в js файле блока т.е. даже если блок не имеет js-представления файл js должен быть?

tenorok commented 10 years ago

как сгенерировать страницу по bemjson c помощью bemer

Грант плагины здесь не требуются. Вот простой пример на expressjs:

// npm i express bemer

var express = require('express');
var bemer = require('bemer');
var app = express();

app.get('/', function(req, res){
  res.send(bemer({ block: 'page' }));
});

var server = app.listen(3000, function() {
    console.log('Listening on port %d', server.address().port);
});

Идём в браузере на http://localhost:3000/ и видим там ответ от сервера:

<div class="page"></div>

В bemaker вместо deps.js используется JSDoc прописаный в js файле блока

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

egor-a-trubnikov-panov commented 10 years ago

В примере сервер просто отдает html по полученному json но ничего не знает о шаблонах. Хочется просто получать html файл собранный по описанию в bemjson с применением шаблонов. Так что думаю неплохо бы иметь на это плагинчик.

tenorok commented 10 years ago

В примере сервер просто отдает html по полученному json но ничего не знает о шаблонах.

Шаблоны можно удобно раскладывать по файлам и пробрасывать туда переменную bemer. Например, пусть есть файл page.bemer.js:

module.exports = function(bemer) {
    bemer.match('page', {
        tag: 'html'
    });
};

Тогда мы можем подключить шаблон из этого файла в index.js:

require('./page.bemer.js')(bemer); // В bemer добавляется шаблон
app.get('/', function(req, res) {
  res.send(bemer({ block: 'page' })); // Шаблонизация происходит с учётом шаблона
});

И увидим результат:

<html class="page"></html>

Хочется просто получать html файл собранный по описанию в bemjson

Ты имеешь ввиду сохранять статическую страничку из заранее известных данных, которые не будут меняться?

egor-a-trubnikov-panov commented 10 years ago

Ты имеешь ввиду сохранять статическую страничку из заранее известных данных, которые не будут меняться?

Ага

tenorok commented 10 years ago

Это достаточно просто, не думаю, что для этого требуется плагин.

Например, возьмём файл struct.js:

var bemer = require('bemer');
console.log(bemer({ block: 'page' }));

И выполним в терминале:

node struct.js >> static.html

Появится файл static.html со следующим содержимым:

<div class="page"></div>

egor-a-trubnikov-panov commented 10 years ago

Получается bemaker собирает все блоки в кучу, т.е. даже если на странице блок не используется нужно будет грузить его описание? С одной стороны это хорошо. все разом загрузили а забыли. С другой стороны такой подход совершенно не оправдан в случаи если неиспользуемых блоков будет очень много. Или же надо будет делать несколько сборок с подробным описанием какие блоки включать? Это опять же не очень удобно, ведь блоков может быть очень много.

Описание сборки с пошью grunt-bemaker примерно такое ?:

    bemaker: {
      directories: ['desktop.blocks'],
      outname: 'all',
      outdir: 'desktop.bundles',
      extensions: ['js', 'css'],
      dependext: '.deps.js',
      jsdoctag: 'deps'
    }

tenorok commented 10 years ago

Если знаешь системы сборки, которые работают по другому принципу — напиши мне пожалуйста, я с интересом посмотрю.

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

Да, описание может быть примерно таким.

egor-a-trubnikov-panov commented 10 years ago

чего-то сборка не работает

Running "bemaker:main" (bemaker) task
Warning: object is not a function Use --force to continue.

что-то неправильно делаю?

bemaker: {
      main: {
        directories: ['blocks'],
        outname: 'all',
        outdir: 'pages',
        extensions: ['js', 'css'],
        dependext: '.deps.js',
        jsdoctag: 'deps'
      }
    }

tenorok commented 10 years ago

Спасибо за репорт! Оказывается поменялось API модуля Events в nodejs, я подкорректировал код и выпустил патч. Пожалуйста, установи grunt-bemaker заново.

Ещё я ошибся в документации (уже обновил readme), расширения файлов надо указывать начиная с точки:

extensions: ['.js', '.css'],

tenorok / bemer

как использовать его в bem проекте вместо bemhtml? #2