automatizando tarefas com grunt - o que era chato não é mais
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
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?
Instalação
(NodeJS + NPM) + Grunt(NodeJS + NPM) + Grunt
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
OUTROS PLUGINS> 2.830
grunt-bannergrunt-browser-sync
grunt-autoshotgrunt-ftp-deploy
grunt-uncssgrunt-contrib-cleangrunt-contrib-copy
grunt-contrib-imagemingrunt-autoprefixer
grunt-contrib-compressgrunt-contrib-jasmine
Perguntas
?
Disponível em:http://www.slideshare.net/andersonagr
Contato: @andersonaguiar
Obrigado!