Атоматизация с Grunt

40
Автоматизация с Grunt Христо Чакъров, Бургасконф 2014

description

От разработване до production deploy - как да автоматизираме рутинните операции!

Transcript of Атоматизация с Grunt

Page 1: Атоматизация с Grunt

Автоматизация с GruntХристо Чакъров, Бургасконф 2014

Page 2: Атоматизация с Grunt

Какво си представяте, когато чуете думата автоматизация?

Page 3: Атоматизация с Grunt
Page 4: Атоматизация с Grunt
Page 5: Атоматизация с Grunt

“Automation isn’t about being lazy, it’s about being efficient.”

Addy Osmani

Page 6: Атоматизация с Grunt
Page 7: Атоматизация с Grunt
Page 8: Атоматизация с Grunt

Рутинните задачи се автоматизират

●Задачите отнемат време

●Често извършваните задачи стават досадни

●Досадните задачи са предпоставка за грешки

Page 9: Атоматизация с Grunt

Разработването в наши дни изглежда горе-долу така...

Page 10: Атоматизация с Grunt

Code Minification

Linting

Sass/LESS Watching

Preview

Unit Testing

File aggregation

Make a Build

Deployment

Page 11: Атоматизация с Grunt

...или така...

Page 12: Атоматизация с Grunt

Как да си улесним живота?

Page 13: Атоматизация с Grunt
Page 14: Атоматизация с Grunt

Преди това да ви се представя...

Page 15: Атоматизация с Grunt

Христо ЧакъровФронт-енд архитект, Нетклайм

Ъбаут Контакти

● 10+ години в уеба

● JavaScript курсове

● WPBGUG

● blog.ickata.net

● github.com/ickata

● sitekreator.com

Page 16: Атоматизация с Grunt

Та, Grunt e...

Page 17: Атоматизация с Grunt
Page 18: Атоматизация с Grunt

●Можем да автоматизираме почти всичко

●Море от разширения (plugins)

●JavaScript ;)

Защо точно Grunt?

Page 19: Атоматизация с Grunt
Page 20: Атоматизация с Grunt

●Проверка на кода (JS Hint)

●Sass/LESS watch

●LiveReload

●Minification

●Packaging

●И много други!

Какво можем да правим с Grunt?

Page 21: Атоматизация с Grunt

се базира на

Page 22: Атоматизация с Grunt

А ти ползваш ли ?

Page 23: Атоматизация с Grunt

Ако все още не ползвате NodeJS -

започнете!

Page 24: Атоматизация с Grunt

Ако все още не ползвате Mac OS -

започнете!Инвестицията се отплаща!

Page 25: Атоматизация с Grunt

Инсталиране на Grunt

Page 26: Атоматизация с Grunt
Page 27: Атоматизация с Grunt

Инсталиране на Grunt Plugin

Page 28: Атоматизация с Grunt
Page 29: Атоматизация с Grunt
Page 30: Атоматизация с Grunt

Конфигуриране

Gruntfile.js

Page 31: Атоматизация с Grunt
Page 32: Атоматизация с Grunt
Page 33: Атоматизация с Grunt

Демо(време е да се излагам :D)

Page 34: Атоматизация с Grunt
Page 35: Атоматизация с Grunt

●Code Linting (JSHint)

●Sass compiling

●LiveReload

●Unit Testing (Jasmine)

●Build & Deploy

github.com/ickata/grunt-tutorial

Page 36: Атоматизация с Grunt
Page 37: Атоматизация с Grunt

Финални думи

Page 38: Атоматизация с Grunt

● върши цялата досадна работа вместо нас :)

● JavaScript ;)

● богата колекция от плъгини

● тегав за конфигуриране

● неработещи плъгини :(

Плюсове и минуси

+ –

Page 39: Атоматизация с Grunt

Питайте ме сега некое и друго въпросче :)

Page 40: Атоматизация с Grunt

Благодаря, задето ме изтърпяхте ;)● slideshare.net/ickatanet● blog.ickata.net