1. Новые возможности bem-
tools для автоматической
сборки проекта
Владимир Алаев
Разработчик
Сергей Белов
Руководитель группы разработки инструментов
Я.Субботник, Москва, 8 сентября 2012 года

2. Расскажу...
— О системах сборки
— Наш опыт
— Сборка в bem-tools
— Live demo
— Как начать использовать bem-tools
2

3. От исходных файлов к релизу
— Препроцессинг
— Компиляция
— Постпроцессинг
— Вспомогательные операции
3

4. Ты что запускаешь
сборку каждый раз?!
4

5. Автоматическая сборка
— File watching
— Сборка по запросу (сервер)
5

6. Доступные инструменты
— make
— Генераторы правил make (automake, cmake)
— Клоны make со своим языком (rake, jake, ant)
— make с исправлением некоторых недостатков
(ninja, tup, fabricate, redo, shake)
6

7. О системах сборки
Сергей Белов, Я.Субботник в Киеве
http://bit.ly/LUDxeA
7

8. Наш опыт
8

9. GNU make
— 3 года использования и разработки
— 1500 строк
— 80 Кб
9

10. Недостатки
— File based
— Нет автоматической сборки
— Неоптимальная сборка
— Язык для правил
10

11. bem-tools
Инструмент для работы по БЭМ
— Создание БЭМ-сущностей
— Сборка файлов технологий
11

12. bem server
Расширение bem-tools
— bem make
— bem server
12

13. Библиотека APW
Ядро системы сборки
— Выполнение списка задач с зависимостями
— Задача - произвольный JavaScript код
— Параллельное выполнение
— JavaScript (Node.js)
http://github.com/bem/apw
13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. bem make
Надстройка над APW
— Знает про БЭМ
— Предоставляет библиотеку правил сборки
— Кастомизируется под проект конфигами
20

21. bem server
— HTTP сервер
— Надстройка над bem make
— Хранит состояние
— Отдает файлы с диска после сборки
21

22. Как начать использовать
— Node.js
— http://github.com/bem/project-stub
— http://github.com/bem/bem-server-demo
22

23. Live demo
23

24. Минимальный проект
1. git clone https://github.com/bem/project-stub.git
2. cd project-stub
3. npm install
4. ./node_modules/.bin/bem make
5. ./node_modules/.bin/bem server
6. http://localhost:8080/pages-desktop/index/
index.html
24

25. Конфигурация сборки
— Узлы - это JavaScript объекты
— Реализуют определенный интерфейс
— Поведение легко переопределить
— .bem/make.js
— level/.bem/level.js
25

26. .bem/make.js
— Подключать библиотеки блоков
— Задавать директории с блоками и страницами
— Указывать список собираемых технологий
26

27. Пример
Подключение внешней библиотеки
MAKE.decl('Arch', {
getLibraries: function() {
return {
'bem-bl': {
type: 'git',
url: 'git://github.com/bem/bem-bl.git'
}
};
}
});
27

28. Пример
Список собираемых технологий
MAKE.decl('BundleNode', {
getTechs: function() {
return [
'bemdecl.js',
'deps.js',
'bemhtml.js',
'css',
'js'
];
}
});
28

29. Пример
Сборка merged страниц
MAKE.decl('BundlesLevelNode', {
buildMergedBundle: function() {
return true;
}
});
29

30. Пример
Кое-что посложнее
'create-test.js-node': function(tech, bundleNode, magicNode) {
var arch = this.ctx.arch,
buildNode = new (MAKE.getNodeClass('BemBuildNode'))({
root: this.root,
bundlesLevel: this.level,
levels: ['blocks'],
declPath: this.getBundlePath(tech) + '.deps.js',
techPath: tech,
techName: tech,
output: this.getNodePrefix()
}),
node = new (MAKE.getNodeClass('TestNode'))(
{
root: this.root,
path: this.getBundlePath(tech) + '.deps.js'
});
arch.setNode(buildNode);
arch.setNode(node);
bundleNode && arch.addParents(buildNode, bundleNode);
magicNode && arch.addChildren(buildNode, magicNode);
arch.addParents(node, buildNode);
return buildNode;
}
30

31. Ссылки
— bem-tools
http://github.com/bem/bem-tools
— Демо-проект
http://github.com/bem/bem-server-demo
— Ипользование bem make
http://bit.ly/OsXqvo
— Кастомизация сборки
http://bit.ly/P17PO5
31

32. Владимир Алаев
scff@yandex-team.ru
scf2k
Сергей Белов
arikon@yandex-team.ru
arik0n