1. Сборка web проекта с
использованием Grunt и Node.js
FOSS Sea Odessa/Viktor Shevchenko

2. Viktor Shevchenko
m:
vict.shevchenko@gmail.com
t: @vict_shevchenko
s: sv.contact

3. Оглавление
•
•
•
•
•
•
•
Сборщики проектов на Nodejs
Grunt – что и зачем?
Начало работы
Конфигурация
Plugins и Workflows
Демо
Grunt в Вашем приложении

4. Сборщики проектов на Nodejs
•
•
•
•
•
Grunt (http://gruntjs.com/)
Jake (https://github.com/mde/jake)
SMOOSH (https://github.com/fat/smoosh)
Gear.js (http://gearjs.org/)
Buildr (https://github.com/balupton/buildr)

6. Что такое Grunt?
Minify
JavaScri
pt
JavaScript
Task
Runner
Preproces
s
CSS
Sprite
images
Run
tests
Linting
…

7. Зачем нужен Grunt?
Автоматизация
Sprite
image
s
Minify
JavaScri
pt
Preproces
s
CSS
Production
Source
Development
Debug

8. Что есть Grunt?
•
•
•
•
•
•
•
•
Разработан и выполняется на Javascript
Powered by
Installed via
Кросс-платформенный
Открытый исходный код
Большое и сильное комьюнити
Гибкий, удобный, настраиваемый
Низкий порог вхождения

9. Они уже используют Grunt

10. Статистика загрузок Grunt
http://npm-stat.vorba.ch/charts.html?package=grunt

11. Экосистема Grunt
• Последняя стабильная версия 0.4.2
• Github issues
• ~1630 Plugins

12. Начало работы с Grunt

13. Пустой Gruntfile.js

14. Grunt Plugins
http://gruntjs.com/plugins

15. Установка Grunt Plugin
Установка необходимого
плагина
Grunt и Grunt plugins в папке
node_modules

16. Использование Grunt Task

17. Использование Grunt Target

18. Использование Grunt TaskList
Формат Grunt TaskList
Использование Grunt
TaskList

19. Выполнение

20. Grunt File Pattern

21. Готов к установке везде

22. Организация Grunt Plugins
Копирование
grunt-contrib-copy
Препроцессинг, комбинирование,
минификация CSS
grunt-contrib-sass
Комбинирование и минификация JS
grunt-contrib-uglify
Сборка изображений в спрайт
grunt-spritesmith
Управлениe index.html
grunt-env + grunt-preprocess
Слежение за файлами
grunt-contrib-watch
архивация
grunt-contrib-compress

23. grunt-contrib-sass

24. grunt-spritesmith
Gruntfile.j
s

25. grunt-env + grunt-preprocess
Index.html

26. grunt-contrib-watch

27. Grunt workflow
img-tasks
-
Optimize
Images
Create
Sprite
development -
imgtasks
Copy:de
v
sass:dev
Watch
production
imgtasks
Copy:
prod
sass:pro
d
Uglify
-
Compres
s

28. Grunt Demo
Demo

29. Grunt в Вашем приложении
• Исследуйте комбинации Grunt tasks
• Оптимизируйте
– https://github.com/sindresorhus/load-grunttasks
– https://github.com/tschaub/grunt-newer
• Автоматизируйте

30. Оптимизация сборки
• 104 HTTP Request
• 1.8 Mb data transfer
• ~loading time 3.32 s
• 32 HTTP Request
• 712 Kb data transfer
• ~loading time 0.688 s

31. Grunt в Вашем приложении
• Оставляйте отзывы на существующие
плагины
• Регистрируйте баги
• Создавайте собственные плагины
(http://gruntjs.com/creating-plugins)

32. Спасибо за внимание
Ваши
вопросы?