Сборка web проекта с использованием Grunt и Node.js

3,163 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,163
On SlideShare
0
From Embeds
0
Number of Embeds
322
Actions
Shares
0
Downloads
19
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Сборка web проекта с использованием Grunt и Node.js

  1. 1. Сборка web проекта с использованием Grunt и Node.js FOSS Sea Odessa/Viktor Shevchenko
  2. 2. Viktor Shevchenko m: vict.shevchenko@gmail.com t: @vict_shevchenko s: sv.contact
  3. 3. Оглавление •  •  •  •  •  •  •  Сборщики проектов на Nodejs Grunt – что и зачем? Начало работы Конфигурация Plugins и Workflows Демо Grunt в Вашем приложении
  4. 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)
  5. 5. Что такое Grunt? Minify JavaScri pt JavaScript Task Runner Preproces s CSS Sprite images Run tests Linting …
  6. 6. Зачем нужен Grunt? Автоматизация Sprite image s Minify JavaScri pt Preproces s CSS Production Source Development Debug
  7. 7. Что есть Grunt? •  •  •  •  •  •  •  •  Разработан и выполняется на Javascript Powered by Installed via Кросс-платформенный Открытый исходный код Большое и сильное комьюнити Гибкий, удобный, настраиваемый Низкий порог вхождения
  8. 8. Они уже используют Grunt
  9. 9. Статистика загрузок Grunt http://npm-stat.vorba.ch/charts.html?package=grunt
  10. 10. Экосистема Grunt •  Последняя стабильная версия 0.4.2 •  Github issues •  ~1630 Plugins
  11. 11. Начало работы с Grunt
  12. 12. Пустой Gruntfile.js
  13. 13. Grunt Plugins http://gruntjs.com/plugins
  14. 14. Установка Grunt Plugin Установка необходимого плагина Grunt и Grunt plugins в папке node_modules
  15. 15. Использование Grunt Task
  16. 16. Использование Grunt Target
  17. 17. Использование Grunt TaskList Формат Grunt TaskList Использование Grunt TaskList
  18. 18. Выполнение
  19. 19. Grunt File Pattern
  20. 20. Готов к установке везде
  21. 21. Организация 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  
  22. 22. grunt-contrib-sass
  23. 23. grunt-spritesmith Gruntfile.j s
  24. 24. grunt-env + grunt-preprocess Index.html
  25. 25. grunt-contrib-watch
  26. 26. 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
  27. 27. Grunt Demo Demo
  28. 28. Grunt в Вашем приложении •  Исследуйте комбинации Grunt tasks •  Оптимизируйте –  https://github.com/sindresorhus/load-grunttasks –  https://github.com/tschaub/grunt-newer •  Автоматизируйте
  29. 29. Оптимизация сборки •  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
  30. 30. Grunt в Вашем приложении •  Оставляйте отзывы на существующие плагины •  Регистрируйте баги •  Создавайте собственные плагины (http://gruntjs.com/creating-plugins)
  31. 31. Спасибо за внимание Ваши вопросы?

×