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

FOSS Sea Odessa/Viktor Shevchenko

Viktor Shevchenko m: vict.shevchenko@gmail.com 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)

Спасибо за внимание

Ваши вопросы?