![Page 1: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/1.jpg)
Automatizando tarefas com Grunt
O que era chato, não é mais :)
![Page 2: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/2.jpg)
@andersonaguiar
![Page 3: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/3.jpg)
www.div64.com
![Page 4: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/4.jpg)
![Page 5: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/5.jpg)
![Page 6: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/6.jpg)
![Page 7: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/7.jpg)
![Page 8: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/8.jpg)
![Page 9: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/9.jpg)
![Page 10: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/10.jpg)
![Page 11: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/11.jpg)
![Page 12: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/12.jpg)
![Page 13: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/13.jpg)
![Page 14: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/14.jpg)
![Page 15: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/15.jpg)
QUE TALAUTOMATIZAR?
![Page 16: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/16.jpg)
![Page 17: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/17.jpg)
Fazer a máquinatrabalhar para você
Ter mais tempo para fazer coisas legais
![Page 18: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/18.jpg)
![Page 19: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/19.jpg)
O que é o Grunt?
![Page 20: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/20.jpg)
![Page 23: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/23.jpg)
Instalação
(NodeJS + NPM) + Grunt(NodeJS + NPM) + Grunt
![Page 25: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/25.jpg)
npm install –g grunt-clinpm install –g grunt-cli
Grunt CliDisponibilizar o grunt globalmente
![Page 26: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/26.jpg)
![Page 27: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/27.jpg)
![Page 28: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/28.jpg)
package.jsonpackage.jsonGruntfile.jsGruntfile.js
Configuracão
![Page 29: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/29.jpg)
package.jsonMeta informações e dependências
npm initnpm init
![Page 30: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/30.jpg)
npm install grunt --save-devnpm install grunt --save-dev
![Page 31: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/31.jpg)
![Page 32: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/32.jpg)
npm installnpm install
![Page 33: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/33.jpg)
Gruntfile.jsTodas os registros de tarefas serão colocados aqui
![Page 34: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/34.jpg)
Plugins e Utilização
![Page 35: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/35.jpg)
npm install grunt-contrib-compass --save-devnpm install grunt-contrib-compass --save-dev
grunt-contrib-compass
Compilar o SASS + Compass
![Page 36: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/36.jpg)
![Page 37: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/37.jpg)
![Page 38: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/38.jpg)
![Page 39: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/39.jpg)
![Page 40: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/40.jpg)
grunt = irá executar a task default
grunt compass:dev = irá executar a task dev do compass
grunt compass:dist = irá executar a task dist do compass
No terminal
![Page 41: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/41.jpg)
pré-processadores
grunt-contrib-sassgrunt-contrib-less
grunt-contrib-stylusgrunt-contrib-coffee
![Page 42: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/42.jpg)
DEMO
![Page 43: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/43.jpg)
npm install grunt-contrib-watch --save-devnpm install grunt-contrib-watch --save-dev
grunt-contrib-watch
O cara que OBSERVA tudo
![Page 44: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/44.jpg)
![Page 45: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/45.jpg)
npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-jshint --save-dev
grunt-contrib-jshint
Verifica erros no JavaScript
![Page 46: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/46.jpg)
![Page 47: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/47.jpg)
npm install grunt-contrib-csslint --save-devnpm install grunt-contrib-csslint --save-dev
grunt-contrib-csslint
Verifica erros no CSS
![Page 48: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/48.jpg)
![Page 49: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/49.jpg)
DEMO
![Page 50: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/50.jpg)
![Page 52: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/52.jpg)
OUTROS PLUGINS> 2.830
![Page 54: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/54.jpg)
grunt-bannergrunt-browser-sync
grunt-autoshotgrunt-ftp-deploy
grunt-uncssgrunt-contrib-cleangrunt-contrib-copy
grunt-contrib-imagemingrunt-autoprefixer
grunt-contrib-compressgrunt-contrib-jasmine
![Page 57: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/57.jpg)
Perguntas
?
![Page 58: Automatizando tarefas com grunt - O que era chato não é mais](https://reader034.vdocuments.net/reader034/viewer/2022051610/548dab76b47959d30c8b664a/html5/thumbnails/58.jpg)
Disponível em:http://www.slideshare.net/andersonagr
Contato: @andersonaguiar
Obrigado!