Download - Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"
![Page 1: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/1.jpg)
Я.Субботник, Москва, 8 сентября 2012 года
РазработчикВладимир Алаев
Новые возможности bem-tools для автоматической сборки проекта
Руководитель группы разработки инструментовСергей Белов
![Page 2: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/2.jpg)
Расскажу...
2
— О системах сборки
— Наш опыт
— Сборка в bem-tools
— Live demo
— Как начать использовать bem-tools
![Page 3: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/3.jpg)
От исходных файлов к релизу
3
— Препроцессинг
— Компиляция
— Постпроцессинг
— Вспомогательные операции
![Page 4: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/4.jpg)
4
Ты что запускаешь сборку каждый раз?!
![Page 5: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/5.jpg)
Автоматическая сборка
— File watching
— Сборка по запросу (сервер)
5
![Page 6: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/6.jpg)
Доступные инструменты
— make
— Генераторы правил make (automake, cmake)
— Клоны make со своим языком (rake, jake, ant)
— make с исправлением некоторых недостатков (ninja, tup, fabricate, redo, shake)
6
![Page 7: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/7.jpg)
Сергей Белов, Я.Субботник в Киеве
http://bit.ly/LUDxeA
О системах сборки
7
![Page 8: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/8.jpg)
Наш опыт
8
![Page 9: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/9.jpg)
GNU make
— 3 года использования и разработки
— 1500 строк
— 80 Кб
9
![Page 10: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/10.jpg)
Недостатки
— File based
— Нет автоматической сборки
— Неоптимальная сборка
— Язык для правил
10
![Page 11: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/11.jpg)
Инструмент для работы по БЭМbem-tools
11
— Создание БЭМ-сущностей
— Сборка файлов технологий
![Page 12: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/12.jpg)
Расширение bem-toolsbem server
12
— bem make
— bem server
![Page 13: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/13.jpg)
Ядро системы сборкиБиблиотека APW
— Выполнение списка задач с зависимостями
— Задача - произвольный JavaScript код
— Параллельное выполнение
— JavaScript (Node.js)
13
http://github.com/bem/apw
![Page 14: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/14.jpg)
14
![Page 15: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/15.jpg)
15
![Page 16: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/16.jpg)
16
![Page 17: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/17.jpg)
17
![Page 18: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/18.jpg)
18
![Page 19: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/19.jpg)
19
![Page 20: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/20.jpg)
Надстройка над APWbem make
— Знает про БЭМ
— Предоставляет библиотеку правил сборки
— Кастомизируется под проект конфигами
20
![Page 21: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/21.jpg)
bem server
— HTTP сервер
— Надстройка над bem make
— Хранит состояние
— Отдает файлы с диска после сборки
21
![Page 22: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/22.jpg)
Как начать использовать
— Node.js
— http://github.com/bem/project-stub
— http://github.com/bem/bem-server-demo
22
![Page 23: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/23.jpg)
Live demo
23
![Page 24: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/24.jpg)
Минимальный проект
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
![Page 25: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/25.jpg)
Конфигурация сборки
— Узлы - это JavaScript объекты
— Реализуют определенный интерфейс
— Поведение легко переопределить
— .bem/make.js
— level/.bem/level.js
25
![Page 26: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/26.jpg)
.bem/make.js
26
— Подключать библиотеки блоков
— Задавать директории с блоками и страницами
— Указывать список собираемых технологий
![Page 27: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/27.jpg)
MAKE.decl('Arch', {
getLibraries: function() {
return { 'bem-bl': { type: 'git', url: 'git://github.com/bem/bem-bl.git' } }; }});
Подключение внешней библиотекиПример
27
![Page 28: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/28.jpg)
MAKE.decl('BundleNode', { getTechs: function() {
return [ 'bemdecl.js', 'deps.js', 'bemhtml.js', 'css', 'js' ]; }});
Список собираемых технологийПример
28
![Page 29: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/29.jpg)
MAKE.decl('BundlesLevelNode', { buildMergedBundle: function() { return true; }});
Сборка merged страницПример
29
![Page 30: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/30.jpg)
'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
![Page 31: Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"](https://reader034.vdocuments.pub/reader034/viewer/2022042700/557cb1e4d8b42a9c528b4a1e/html5/thumbnails/31.jpg)
Ссылки
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