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