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
Obrigado!
Top Related