Automatizando tarefas com grunt - O que era chato não é mais

Post on 05-Dec-2014

22.631 views 0 download

description

Poupe tempo utilizando Grunt. Tarefas rotineiras de um Desenvolvedor Front-end, tais como: minify css e js, deploy, compilação de pré-processadores como sass, less e stylus, otimização de imagem, hint de css e js, entre outras. Tudo isso pode ser facilmente executado com apenas um cara, Grunt.

Transcript of Automatizando tarefas com grunt - O que era chato não é mais

Automatizando tarefas com Grunt

O que era chato, não é mais :)

@andersonaguiar

www.div64.com

QUE TALAUTOMATIZAR?

Fazer a máquinatrabalhar para você

Ter mais tempo para fazer coisas legais

O que é o Grunt?

http://gruntjs.com/

https://github.com/gruntjs/grunt

Instalação

(NodeJS + NPM) + Grunt(NodeJS + NPM) + Grunt

http://nodejs.org

npm install –g grunt-clinpm install –g grunt-cli

Grunt CliDisponibilizar o grunt globalmente

package.jsonpackage.jsonGruntfile.jsGruntfile.js

Configuracão

package.jsonMeta informações e dependências

npm initnpm init

npm install grunt --save-devnpm install grunt --save-dev

npm installnpm install

Gruntfile.jsTodas os registros de tarefas serão colocados aqui

Plugins e Utilização

npm install grunt-contrib-compass --save-devnpm install grunt-contrib-compass --save-dev

grunt-contrib-compass

Compilar o SASS + Compass

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

pré-processadores

grunt-contrib-sassgrunt-contrib-less

grunt-contrib-stylusgrunt-contrib-coffee

DEMO

npm install grunt-contrib-watch --save-devnpm install grunt-contrib-watch --save-dev

grunt-contrib-watch

O cara que OBSERVA tudo

npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-jshint --save-dev

grunt-contrib-jshint

Verifica erros no JavaScript

npm install grunt-contrib-csslint --save-devnpm install grunt-contrib-csslint --save-dev

grunt-contrib-csslint

Verifica erros no CSS

DEMO

https://github.com/andersonaguiar/TDC2014-Grunt

OUTROS PLUGINS> 2.830

http://gruntjs.com/plugins

grunt-bannergrunt-browser-sync

grunt-autoshotgrunt-ftp-deploy

grunt-uncssgrunt-contrib-cleangrunt-contrib-copy

grunt-contrib-imagemingrunt-autoprefixer

grunt-contrib-compressgrunt-contrib-jasmine

https://www.facebook.com/groups/gruntbrasil

http://gruntjs.com/who-uses-grunt

Perguntas

?

Disponível em:http://www.slideshare.net/andersonagr

Contato: @andersonaguiar

andersonaguiar.web@gmail.com

Obrigado!