Сборка проектов с помощью ENB

Сборка проектов с помощью ENBАлександр Бойченко

@banzalik

Почему не Grunt, Gulp, Brunch?

• Gulp -‐ Jul 4, 2013 • Grunt -‐ Sep 21, 2011 • Brunch -‐ Nov 04, 2010 • ENB -‐ Mar 07, 2013

• BEM-‐Tools (идейный вдохновитель enb и мой предыдущий инструмент для сборки) -‐ Jan 29, 2010

• Задолго до BEM-‐Tools использовал Make

2

Почему ENB?

• Это сборщик проектов, а не «комбайн» как другие инструменты • Модульный

• Оперирует терминами технология, модуль, уровень переопределения

• Быстрый • Умеет кешировать результат работы • Гибко настраиваемый • Поддерживает зависимости на уровне всех технологий • Приветствует порядок на файловой системе

3

Немного о терминах

Технология — все файлы на проекте разделяем по группам, которые в дальнейшем имеются технологиями. Например: stylus технология — все *.styl файлы на проекте js технология — все файлы *.js html технология — все файлы *.html Картинки, тесты, документация, *.php, *.sql, *.tmpl, *.server.js, *.client.js, *.md …

4


Модуль (блок в терминах BEM) — папка с файлами технологий, отвечает за определенную часть функционала. Например: menu/ menu.js menu.css menu.tmpl menu.md

5


Уровень переопределения — папка с модулями, отвечает за значительную или всю часть приложения. Например: app/ menu/ header/ footer/ react/

6

Фичи

7

Зависимости

8

Для несложных (с точки зрения JS) проектов нет острой необходимости в require.js и его аналогов. Зависимости описываются в отдельном файле и работают для всех технологий (css, js, шаблоны, тесты, документация) Любой модуль может содержать любое количество зависимостей от других модулей, необходимых для его работы. Два вида зависимостей, что надо подключить до объявления модуля и что можно подключить после

Зависимости

9

({ mustDeps: [ { block: 'react' } ], shouldDeps: [ { block: 'tabs' }, { block: 'comment' } ]})

«Гибкие» зависимости

10

Чаще всего для проекта вы собираете только один css/js файл.

Но иногда, для больших проектов, возникает необходимость разделить общий файл на несколько.

Очень частно это разделение весьма индивидуально и тут нет никаких универсальных рецептов о том как это делать.

Но когда вы с этим сталкиваетесь, то чаще всего возникает боль.

• Как разделить JS?

• Как разделить CSS?

• Как разделить шаблоны?

«Гибкие» зависимости, мой flow.

11

• Все «страницы/экраны» разрабатываются отдельно (отдельные файлы)

• Для каждой страницы есть «верхнеуровневая» декларация зависимостей (тут есть шапка, подвал, новости и авторизация)

• ENB умеет склеивать и вычитать декларации -‐ с помощью этого механизма и разбиения приложения на страницы можно собирать какие угодно «бандлы»

«Гибкие» зависимости, пример.

12

Допустим, есть 5 страниц:

• index • news • contact • about • register


13

Общая сборка:

• index + news + contact + about + register = all.*


14

Сборка основной страницы + то, что не хватает остальным индивидуально:

• index.* • index -‐ news= news.* • index -‐ contact = contact.* • index -‐ about = about.* • index -‐ register = register.*


15

Сборка базы + дополнительные:

• index.* • index -‐ (news + contact + about + register) = subpages.*


16

Сборка базовых страниц + дополнительные:

• index + register + news = common.*

• common -‐ (contact + about) = old.*

«Обратный» порядок сборки

17

Задача: надо собрать css файл. Решение: что надо для сборки css? common.styl преобразовать в CSS <— создать общий common.styl <— подключить все *.styl файлы, которые подходят по правилам зависимостей <— сформировать общий файл зависимостей <— обойти все уровни переопределения и модули в них, в поиске зависимостей. Первый раз восполняются все шаги. Дальше, только то, что изменилось и ему точно требуется пересборка.

«Обратный» порядок сборки

18

Плюсы такого подхода: -‐ пересобираем только то, что действительно в этом нуждается -‐ понятная, линейная структура зависмостей -‐ кеширование каждого этапа «сборки» -‐ независимые технологии собираются параллельно -‐ значительно увеличиваем скорость сборки

А что если на проекте много страниц?

19

Как правило, скорость сборки таких проектов может замедляться линейно, т.к. каждая страница требует дополнительного времени на сборку или на генерацию all.* файлов. На самом деле это нормально — для produсtion сборки. Но совсем не подходит при разработке, время на сборку таких проектов с каждым днем растет -‐> растет время ожидания сборки и самой разработки.

ENB Server

20

Присутствует режим сервера как в виде самостоятельного express-‐сервера, так и в виде express-‐middleware. Особенности: • При изменении файла, сборка не запускается • Процесс сборки запускается только тогда, когда браузер запросил файл

• Если файлы техноглии не изменились — отдается файл с кеша

ENB Server

21

• Значительно ускоряется процесс сборки • Для каждой страницы собирается минимально необходимый код • Собирается только то, с чем вы сейчас работаете • Отлично подходит для тех, кто несколько раз меняет код или меняет код в разных файлах, а потом смотрит результат его работы (нет холостых процессов пересборки, как в случаи в watch)

• Это самый быстрый способ девелоп сборки проекта из тех, что мне известны

Полезные ссылки

22

http://enb-‐make.info https://github.com/enb-‐make/ http://ru.bem.info/tools/bem/bem-‐tools/ http://tech.yandex.ru/events/yasubbotnik/kiev-‐may-‐2012/talks/117/

http://enb-make.info

https://github.com/enb-make/

http://ru.bem.info/tools/bem/bem-tools/

http://tech.yandex.ru/events/yasubbotnik/kiev-may-2012/talks/117/

Спасибо

23

Александр Бойченко [email protected] @banzalik

mailto:[email protected]

Internet

Сборка проектов с помощью ENB