Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"
0 likes1,216 views
Документ описывает новые возможности bem-tools для автоматической сборки проекта, включая системы сборки и практический опыт использования инструментов. В нем представлено руководство по началу работы с bem-tools, включая примеры конфигурации и сборки. Также обсуждаются доступные инструменты и библиотеки для оптимизации процесса сборки.
![Пример
Список собираемых технологий
MAKE.decl('BundleNode', {
getTechs: function() {
return [
'bemdecl.js',
'deps.js',
'bemhtml.js',
'css',
'js'
];
}
});
28](https://image.slidesharecdn.com/random-121026041010-phpapp01/85/bem-tools-28-320.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](https://image.slidesharecdn.com/random-121026041010-phpapp01/85/bem-tools-30-320.jpg)
Владимир Алаев, Сергей Белов "Новые возможности bem-tools для автоматической сборки проекта"
- 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