Сборка web проекта с использованием grunt и node.js
TRANSCRIPT
Сборка web проекта с использованием Grunt и Node.js
FOSS Sea Odessa/Viktor Shevchenko
Viktor Shevchenko m: [email protected] t: @vict_shevchenko s: sv.contact
Оглавление • Сборщики проектов на Nodejs • Grunt – что и зачем? • Начало работы • Конфигурация • Plugins и Workflows • Демо • Grunt в Вашем приложении
• 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
Что такое Grunt?
JavaScript Task
Runner
Minify JavaScri
pt
Preprocess
CSS
Linting
Run tests
Sprite images
…
Зачем нужен Grunt?
Автоматизация
Minify JavaScri
pt
Preprocess
CSS
Sprite image
s
Source Development
Debug
Production
• Разработан и выполняется на Javascript • Powered by • Installed via • Кросс-платформенный • Открытый исходный код • Большое и сильное комьюнити • Гибкий, удобный, настраиваемый • Низкий порог вхождения
Что есть Grunt?
Они уже используют Grunt
Статистика загрузок Grunt
http://npm-stat.vorba.ch/charts.html?package=grunt
• Последняя стабильная версия 0.4.2 • Github issues • ~1630 Plugins
Экосистема Grunt
Начало работы с Grunt
Пустой Gruntfile.js
Grunt Plugins http://gruntjs.com/plugins
Установка Grunt Plugin
Установка необходимого плагина
Grunt и Grunt plugins в папке node_modules
Использование Grunt Task
Использование Grunt Target
Использование Grunt TaskList Формат Grunt TaskList
Использование Grunt TaskList
Выполнение
Grunt File Pattern
Готов к установке везде
Организация 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
grunt-contrib-sass
grunt-spritesmith
Gruntfile.js
grunt-env + grunt-preprocess
Index.html
grunt-contrib-watch
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
Grunt Demo
Demo
Grunt в Вашем приложении
• Исследуйте комбинации Grunt tasks • Оптимизируйте
– https://github.com/sindresorhus/load-grunt-tasks
– https://github.com/tschaub/grunt-newer • Автоматизируйте
Оптимизация сборки
• 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
Grunt в Вашем приложении
• Оставляйте отзывы на существующие плагины
• Регистрируйте баги • Создавайте собственные плагины (http://gruntjs.com/creating-plugins)
Спасибо за внимание
Ваши вопросы?