Automatizando
tarefas com Grunt
O que era chato, não é mais :)
@andersonaguiar
www.div64.com
QUE TAL
AUTOMATIZAR?
Fazer a máquina
trabalhar 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 Cli
Disponibilizar o grunt globalmente
package.jsonpackage.json
Gruntfile.jsGruntfile.js
Configuracão
package.json
Meta informaç ões e dependências
npm initnpm init
npm install grunt --save-npm install grunt --save-
devdev
npm installnpm install
Gruntfile.js
Todas os registros de tarefas serão colocados aqui
Plugins e Utilizaç ão
npm install grunt-contrib-compass --save-npm install grunt-contrib-compass --save-
devdev
grunt-contrib-
compass
Compilar ...
grunt = iráexecutar a task default
grunt compass:dev = iráexecutar a task dev do compass
grunt compass:dist = iráexecutar ...
pré -processadores
grunt-contrib-sass
grunt-contrib-less
grunt-contrib-stylus
grunt-contrib-coffee
DEMO
npm install grunt-contrib-watch --save-devnpm install grunt-contrib-watch --save-dev
grunt-contrib-
watch
O cara que OBSER...
npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-jshint --save-dev
grunt-contrib-jshint
Verifica erros...
npm install grunt-contrib-csslint --save-devnpm install grunt-contrib-csslint --save-dev
grunt-contrib-csslint
Verifica er...
DEMO
https://github.com/andersonaguiar/TDC2014-Grunt
OUTROS PLUGINS
> 2.830
http://gruntjs.com/plugins
grunt-banner
grunt-browser-sync
grunt-autoshot
grunt-ftp-deploy
grunt-uncss
grunt-contrib-clean
grunt-contrib-copy
grunt-c...
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!
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Automatizando tarefas com grunt - O que era chato não é mais
Upcoming SlideShare
Loading in …5
×

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

25,110 views

Published on

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.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
25,110
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
30
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Projeto maduro.
  • Mostrar sites das ferramentas comuns
  • Mostrar sites das ferramentas comuns
  • Projeto maduro.
  • Projeto maduro.
  • Windows, mac, linux. Node já vem com o NPM nas versões a partir de 0.6.x
  • Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
  • Instalando o grunt no projeto
  • Instalando o grunt no projeto
  • Instalando o grunt no projeto
  • Instalando o grunt no projeto
  • Esse comando irá baixar todas as dependências necessárias para o projeto de acordo com o package.json
  • Instalando o grunt no projeto
  • Esse comando irá baixar todas as dependências necessárias para o projeto de acordo com o package.json
  • Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
  • Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
  • Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
  • Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
  • Fazendo isso o comando Grunt estará disponível para você no terminal de forma global
  • Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
  • Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
  • Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
  • Esse comando irá baixar todas as dependências necessárias para o projeto de acordo com o package.json
  • Tarefas comuns: compilar pré-processador, lint, sprite, live reload, concatenação...
  • Automatizando tarefas com grunt - O que era chato não é mais

    1. 1. Automatizando tarefas com Grunt O que era chato, não é mais :)
    2. 2. @andersonaguiar
    3. 3. www.div64.com
    4. 4. QUE TAL AUTOMATIZAR?
    5. 5. Fazer a máquina trabalhar para você Ter mais tempo para fazer coisas legais
    6. 6. O que é o Grunt?
    7. 7. http://gruntjs.com/
    8. 8. https://github.com/gruntjs/grunt
    9. 9. Instalaç ão (NodeJS + NPM) + Grunt(NodeJS + NPM) + Grunt
    10. 10. http://nodejs.org
    11. 11. npm install –g grunt-clinpm install –g grunt-cli Grunt Cli Disponibilizar o grunt globalmente
    12. 12. package.jsonpackage.json Gruntfile.jsGruntfile.js Configuracão
    13. 13. package.json Meta informaç ões e dependências npm initnpm init
    14. 14. npm install grunt --save-npm install grunt --save- devdev
    15. 15. npm installnpm install
    16. 16. Gruntfile.js Todas os registros de tarefas serão colocados aqui
    17. 17. Plugins e Utilizaç ão
    18. 18. npm install grunt-contrib-compass --save-npm install grunt-contrib-compass --save- devdev grunt-contrib- compass Compilar o SASS + Compass
    19. 19. 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
    20. 20. pré -processadores grunt-contrib-sass grunt-contrib-less grunt-contrib-stylus grunt-contrib-coffee
    21. 21. DEMO
    22. 22. npm install grunt-contrib-watch --save-devnpm install grunt-contrib-watch --save-dev grunt-contrib- watch O cara que OBSERVA tudo
    23. 23. npm install grunt-contrib-jshint --save-devnpm install grunt-contrib-jshint --save-dev grunt-contrib-jshint Verifica erros no JavaScript
    24. 24. npm install grunt-contrib-csslint --save-devnpm install grunt-contrib-csslint --save-dev grunt-contrib-csslint Verifica erros no CSS
    25. 25. DEMO
    26. 26. https://github.com/andersonaguiar/TDC2014-Grunt
    27. 27. OUTROS PLUGINS > 2.830
    28. 28. http://gruntjs.com/plugins
    29. 29. grunt-banner grunt-browser-sync grunt-autoshot grunt-ftp-deploy grunt-uncss grunt-contrib-clean grunt-contrib-copy grunt-contrib-imagemin grunt-autoprefixer grunt-contrib-compress grunt-contrib-jasmine
    30. 30. https://www.facebook.com/groups/gruntbrasil
    31. 31. http://gruntjs.com/who-uses-grunt
    32. 32. Perguntas ?
    33. 33. Disponível em: http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiar.web@gmail.com Obrigado!

    ×