Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Сборка  проектов  с  
помощью  ENB
Александр  Бойченко  
@banzalik
Почему  не  Grunt,  Gulp,  Brunch?
• Gulp  -­‐  Jul  4,  2013  
• Grunt  -­‐  Sep  21,  2011  
• Brunch  -­‐  Nov  04,  20...
Почему  ENB?
• Это  сборщик  проектов,  а  не  «комбайн»  как  другие  инструменты  
• Модульный  
• Оперирует  терминами ...
Немного  о  терминах
Технология  —  все  файлы  на  проекте  разделяем  по  группам,  
которые  в  дальнейшем  имеются  те...
Немного  о  терминах
Модуль  (блок  в  терминах  BEM)  —  папка  с  файлами  
технологий,  отвечает  за  определенную  час...
Немного  о  терминах
Уровень  переопределения  —  папка  с  модулями,  отвечает  
за  значительную  или  всю  часть  прило...
Фичи
7
Зависимости
8
Для  несложных  (с  точки  зрения  JS)  проектов  нет  острой  
необходимости  в  require.js  и  его  аналог...
Зависимости
9
({

mustDeps: [

{

block: 'react'

}

],

shouldDeps: [

{

block: 'tabs'

},

{

block: 'comment'

}

]

})
«Гибкие»  зависимости
10
Чаще  всего  для  проекта  вы  собираете  только  один  css/js  файл.  
Но  иногда,  для  больших...
«Гибкие»  зависимости,  мой  flow.
11
• Все  «страницы/экраны»  разрабатываются  отдельно  (отдельные  
файлы)  
• Для  ка...
«Гибкие»  зависимости,  пример.
12
Допустим,  есть  5  страниц:  
• index  
• news  
• contact  
• about  
• register
«Гибкие»  зависимости,  пример.
13
Общая  сборка:  
• index  +  news  +  contact  +  about  +  register  =  all.*
«Гибкие»  зависимости,  пример.
14
Сборка  основной  страницы  +  то,  что  не  хватает  остальным  
индивидуально:  
• in...
«Гибкие»  зависимости,  пример.
15
Сборка  базы  +  дополнительные:  
• index.*  
• index  -­‐  (news  +  contact  +    ab...
«Гибкие»  зависимости,  пример.
16
Сборка  базовых  страниц  +  дополнительные:  
• index  +  register  +  news  =  common...
«Обратный»  порядок  сборки
17
Задача:  надо  собрать  css  файл.  
Решение:  что  надо  для  сборки  css?  
common.styl  ...
«Обратный»  порядок  сборки
18
Плюсы  такого  подхода:  
-­‐  пересобираем  только  то,  что  действительно  в  этом  
нуж...
А  что  если  на  проекте  много  страниц?
19
Как  правило,  скорость  сборки  таких  проектов  может  
замедляться  линей...
ENB  Server
20
Присутствует  режим  сервера  как  в  виде  самостоятельного  
express-­‐сервера,  так  и  в  виде  express...
ENB  Server
21
• Значительно  ускоряется  процесс  сборки  
• Для  каждой  страницы  собирается  минимально  необходимый  ...
Полезные  ссылки
22
http://enb-­‐make.info  
https://github.com/enb-­‐make/  
http://ru.bem.info/tools/bem/bem-­‐tools/  
...
Спасибо
23
Александр  Бойченко  
banzalik@gmail.com  
@banzalik
Upcoming SlideShare
Loading in …5
×

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

866 views

Published on

Published in: Internet
  • Be the first to comment

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

  1. 1. Сборка  проектов  с   помощью  ENB Александр  Бойченко   @banzalik
  2. 2. Почему  не  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
  3. 3. Почему  ENB? • Это  сборщик  проектов,  а  не  «комбайн»  как  другие  инструменты   • Модульный   • Оперирует  терминами  технология,  модуль,  уровень   переопределения   • Быстрый   • Умеет  кешировать  результат  работы   • Гибко  настраиваемый   • Поддерживает  зависимости  на  уровне  всех  технологий   • Приветствует  порядок  на  файловой  системе 3
  4. 4. Немного  о  терминах Технология  —  все  файлы  на  проекте  разделяем  по  группам,   которые  в  дальнейшем  имеются  технологиями.   Например:   stylus  технология  —    все  *.styl  файлы  на  проекте   js  технология  —  все  файлы  *.js   html  технология  —  все  файлы  *.html   Картинки,  тесты,  документация,  *.php,  *.sql,  *.tmpl,   *.server.js,  *.client.js,  *.md  … 4
  5. 5. Немного  о  терминах Модуль  (блок  в  терминах  BEM)  —  папка  с  файлами   технологий,  отвечает  за  определенную  часть  функционала.   Например:    menu/     menu.js     menu.css     menu.tmpl     menu.md 5
  6. 6. Немного  о  терминах Уровень  переопределения  —  папка  с  модулями,  отвечает   за  значительную  или  всю  часть  приложения.   Например:   app/     menu/     header/     footer/     react/ 6
  7. 7. Фичи 7
  8. 8. Зависимости 8 Для  несложных  (с  точки  зрения  JS)  проектов  нет  острой   необходимости  в  require.js  и  его  аналогов.   Зависимости  описываются  в  отдельном  файле  и  работают   для  всех  технологий  (css,  js,  шаблоны,  тесты,  документация)   Любой  модуль  может  содержать  любое  количество   зависимостей  от  других  модулей,  необходимых  для  его   работы.   Два  вида  зависимостей,  что  надо  подключить  до   объявления  модуля  и  что  можно  подключить  после
  9. 9. Зависимости 9 ({
 mustDeps: [
 {
 block: 'react'
 }
 ],
 shouldDeps: [
 {
 block: 'tabs'
 },
 {
 block: 'comment'
 }
 ]
 })
  10. 10. «Гибкие»  зависимости 10 Чаще  всего  для  проекта  вы  собираете  только  один  css/js  файл.   Но  иногда,  для  больших  проектов,  возникает  необходимость   разделить  общий  файл  на  несколько.   Очень  частно  это  разделение  весьма  индивидуально  и  тут  нет   никаких  универсальных  рецептов  о  том  как  это  делать.   Но  когда  вы  с  этим  сталкиваетесь,  то  чаще  всего  возникает  боль.   • Как  разделить  JS?   • Как  разделить  CSS?   • Как  разделить  шаблоны?
  11. 11. «Гибкие»  зависимости,  мой  flow. 11 • Все  «страницы/экраны»  разрабатываются  отдельно  (отдельные   файлы)   • Для  каждой  страницы  есть  «верхнеуровневая»  декларация   зависимостей  (тут  есть  шапка,  подвал,  новости  и  авторизация)   • ENB  умеет  склеивать  и  вычитать  декларации  -­‐  с  помощью  этого   механизма  и  разбиения  приложения  на  страницы  можно   собирать  какие  угодно  «бандлы»
  12. 12. «Гибкие»  зависимости,  пример. 12 Допустим,  есть  5  страниц:   • index   • news   • contact   • about   • register
  13. 13. «Гибкие»  зависимости,  пример. 13 Общая  сборка:   • index  +  news  +  contact  +  about  +  register  =  all.*
  14. 14. «Гибкие»  зависимости,  пример. 14 Сборка  основной  страницы  +  то,  что  не  хватает  остальным   индивидуально:   • index.*   • index  -­‐  news=  news.*     • index  -­‐  contact  =  contact.*   • index  -­‐  about  =  about.*     • index  -­‐  register  =  register.*  
  15. 15. «Гибкие»  зависимости,  пример. 15 Сборка  базы  +  дополнительные:   • index.*   • index  -­‐  (news  +  contact  +    about  +  register)  =  subpages.*  
  16. 16. «Гибкие»  зависимости,  пример. 16 Сборка  базовых  страниц  +  дополнительные:   • index  +  register  +  news  =  common.*   • common  -­‐  (contact  +  about)  =  old.*
  17. 17. «Обратный»  порядок  сборки 17 Задача:  надо  собрать  css  файл.   Решение:  что  надо  для  сборки  css?   common.styl    преобразовать  в  CSS  <—  создать  общий   common.styl  <—  подключить  все  *.styl  файлы,  которые   подходят  по  правилам  зависимостей  <—  сформировать   общий  файл  зависимостей  <—  обойти  все  уровни   переопределения  и  модули  в  них,  в  поиске  зависимостей.   Первый  раз  восполняются  все  шаги.  Дальше,  только  то,  что   изменилось  и  ему  точно  требуется  пересборка.
  18. 18. «Обратный»  порядок  сборки 18 Плюсы  такого  подхода:   -­‐  пересобираем  только  то,  что  действительно  в  этом   нуждается   -­‐  понятная,  линейная  структура  зависмостей   -­‐  кеширование  каждого  этапа  «сборки»   -­‐  независимые  технологии  собираются  параллельно   -­‐  значительно  увеличиваем  скорость  сборки
  19. 19. А  что  если  на  проекте  много  страниц? 19 Как  правило,  скорость  сборки  таких  проектов  может   замедляться  линейно,  т.к.  каждая  страница  требует     дополнительного  времени  на  сборку  или  на  генерацию   all.*  файлов.   На  самом  деле  это  нормально  —  для  produсtion  сборки.   Но  совсем  не  подходит  при  разработке,  время  на  сборку   таких  проектов  с  каждым  днем  растет  -­‐>  растет  время   ожидания  сборки  и  самой  разработки.
  20. 20. ENB  Server 20 Присутствует  режим  сервера  как  в  виде  самостоятельного   express-­‐сервера,  так  и  в  виде  express-­‐middleware.   Особенности:   • При  изменении  файла,  сборка  не  запускается   • Процесс  сборки  запускается  только  тогда,  когда  браузер  запросил   файл   • Если  файлы  техноглии  не  изменились  —  отдается  файл  с  кеша
  21. 21. ENB  Server 21 • Значительно  ускоряется  процесс  сборки   • Для  каждой  страницы  собирается  минимально  необходимый  код   • Собирается  только  то,  с  чем  вы  сейчас  работаете   • Отлично  подходит  для  тех,  кто  несколько  раз  меняет  код  или   меняет  код  в  разных  файлах,  а  потом  смотрит  результат  его   работы  (нет  холостых  процессов  пересборки,  как  в  случаи  в  watch)   • Это  самый  быстрый  способ  девелоп  сборки  проекта  из  тех,  что   мне  известны
  22. 22. Полезные  ссылки 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/
  23. 23. Спасибо 23 Александр  Бойченко   banzalik@gmail.com   @banzalik

×