AUTOMATIZANDO
TAREFAS DE FRONT-END
COM GRUNTJS
Rafael Lyra
O QUE É O GRUNTJS?

O GRUNTJS É UM GERENCIADOR DE TAREFAS FRONT-END
ESCRITO EM JAVASCRIPT (NODEJS).
O Grunt pode rodar ape...
COMO FUNCIONA O GRUNTJS?

O FUNCIONAMENTO DO GRUNT DEPENDE DE 3 COISAS:
O Grunt CLI (global)
O Grunt (local)
Os plugins do...
COMO O GRUNT CLI FUNCIONA

O GRUNT CLI É INSTALADO NO SEU COMPUTADOR DE FORMA
GLOBAL VIA NPM, E VOCÊ USA ELE PARA RODAR DI...
Cada vez que você roda o Grunt CLI ele procura por uma versão
do Grunt instalada e quando ele encontra ele carrega a Bibli...
COMO O GRUNT FUNCIONA
O GRUNT PODE SER INSTALADO EM QUALQUER
PASTA DO SEU COMPUTADOR VIA NPM, O QUE
PERMITE QUE VOCÊ TENHA VÁRIAS VERSÕES
DO GRU...
O funcionamento do Grunt depende de 2 arquivos, o
package.json, e o Gruntfile.js (ou .coffee)
OS PLUGINS DO GRUNT

OS PLUGINS TAMBÉM SÃO INSTALADOS LOCALMENTE VIA
NPM E SÃO CARREGADOS NO SEU GRUNTFILE
grunt-contrib-clean
utilizado para excluir arquivos e pastas.

grunt-contrib-compass
compila sass para css utilizando o co...
handlebars - mustache - batman - haml - hoganjs - twig...
jade
jasmine - nodeunit - qunit - mocha - behat ...
selenium - p...
Concatenar arquivos
Copiar arquivos
Criação de links simbólicos
Checar dependencias quebradas em AMD
Criar arquivo manifes...
grunt-run-grunt
Grunt task to run Gruntfiles in a child process. Gruntception!
VOCÊ ENCONTRA A MAIORIA DOS PLUGINS EM:
HTTP://GRUNTJS.COM/PLUGINS
QUEM USA O GRUNT?
A Adobe usa o grunt no brackets.
O jQuery usa o grunt no jQuery no jQuery UI e no QUnit
O twitter usa o ...
THANKS!

RAFAEL LYRA

front end developer at apontador.com

blog: rafaellyra.com
github: rafaellyra
twitter: @rafaellyra
l...
Upcoming SlideShare
Loading in …5
×

Devshare - Automatizando tarefas de javascript com GruntJS

1,096 views

Published on

Slides do talk de GruntJS no 4º Devshare.

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

  • Be the first to like this

No Downloads
Views
Total views
1,096
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Devshare - Automatizando tarefas de javascript com GruntJS

  1. 1. AUTOMATIZANDO TAREFAS DE FRONT-END COM GRUNTJS Rafael Lyra
  2. 2. O QUE É O GRUNTJS? O GRUNTJS É UM GERENCIADOR DE TAREFAS FRONT-END ESCRITO EM JAVASCRIPT (NODEJS). O Grunt pode rodar apenas uma tarefa de cada vez, ou várias tarefas juntas.
  3. 3. COMO FUNCIONA O GRUNTJS? O FUNCIONAMENTO DO GRUNT DEPENDE DE 3 COISAS: O Grunt CLI (global) O Grunt (local) Os plugins do Grunt
  4. 4. COMO O GRUNT CLI FUNCIONA O GRUNT CLI É INSTALADO NO SEU COMPUTADOR DE FORMA GLOBAL VIA NPM, E VOCÊ USA ELE PARA RODAR DIFERENTES VERSÕES DO GRUNT
  5. 5. Cada vez que você roda o Grunt CLI ele procura por uma versão do Grunt instalada e quando ele encontra ele carrega a Biblioteca do Grunt local, aplica as configurações, e executa as tarefas que você pediu.
  6. 6. COMO O GRUNT FUNCIONA
  7. 7. O GRUNT PODE SER INSTALADO EM QUALQUER PASTA DO SEU COMPUTADOR VIA NPM, O QUE PERMITE QUE VOCÊ TENHA VÁRIAS VERSÕES DO GRUNT INSTALADAS SIMULTÂNEAMENTE.
  8. 8. O funcionamento do Grunt depende de 2 arquivos, o package.json, e o Gruntfile.js (ou .coffee)
  9. 9. OS PLUGINS DO GRUNT OS PLUGINS TAMBÉM SÃO INSTALADOS LOCALMENTE VIA NPM E SÃO CARREGADOS NO SEU GRUNTFILE
  10. 10. grunt-contrib-clean utilizado para excluir arquivos e pastas. grunt-contrib-compass compila sass para css utilizando o compass grunt-contrib-connect cria um web server grunt-contrib-uglify / grunt-contrib-mincss minificam js/css grunt-contrib-watch roda tasks quando um arquivo é adicionado/alterado/excluído grunt-shell para rodar comandos no shell grunt-plato gerar relatórios de códigos
  11. 11. handlebars - mustache - batman - haml - hoganjs - twig... jade jasmine - nodeunit - qunit - mocha - behat ... selenium - phantonjs / casperjs jshint - jslint requirejs - browserify rework - sass - less - stylus - absurdjs emberjs - backbone - canjs - angularjs heroku - akamai - aws - jenkins - nginx bower browserstack coffescript - dart ssh - ftp - rsync wordpress - jekyll
  12. 12. Concatenar arquivos Copiar arquivos Criação de links simbólicos Checar dependencias quebradas em AMD Criar arquivo manifesto para appcache com HTML5 Fazer beautify de arquivos javascript e css Crontrole de cache com timestamp/hash Renomear arquivos usando regex (?) Compilar markdown para html Criar sprites (sem o compass) Criar site maps
  13. 13. grunt-run-grunt Grunt task to run Gruntfiles in a child process. Gruntception!
  14. 14. VOCÊ ENCONTRA A MAIORIA DOS PLUGINS EM: HTTP://GRUNTJS.COM/PLUGINS
  15. 15. QUEM USA O GRUNT? A Adobe usa o grunt no brackets. O jQuery usa o grunt no jQuery no jQuery UI e no QUnit O twitter usa o Grunt no TweetDeck e no Typeahead O Apontador.com usa o grunt nos seus projetos. ... E BUSCANDO O TERMO GRUNTJS NO GITHUB EU ENCONTREI: 684 repositorios públicos 5.238 issues (a maioria pedindo para instalar o gruntjs nos projetos)
  16. 16. THANKS! RAFAEL LYRA front end developer at apontador.com blog: rafaellyra.com github: rafaellyra twitter: @rafaellyra linkedin: br.linkedin.com/in/rafaellyra/

×