Automação de tarefas com GruntJS

Slides do DevCast de automação de tarefas com GruntJS.

Transcript

1. WHY GOOD PROGRAMMERS ARE LAZY AND DUMB? Philipp Lenssen
2. PORQUE PREGUIÇOSO? Preguiçosos, porque apenas programadores preguiçosos irão querer escrever o tipo de ferramentas que podem substituí- los no final. Preguiçosos, porque somente um programador preguiçoso vai evitar escrever código monótono e repetitivo – assim evitando redundância, o inimigo da mantenabilidade e flexibilidade de software. No mais, as ferramentas e processos que vêm disso, disparados pela preguiça, irão aumentar a produção.
3. E PORQUE IDIOTA? Isso porque para ele encontrar as melhores soluções a um problema, precisa manter uma mente aberta e pensar fora da caixa. De certa forma, isso leva à mentalidade de uma criança, incrivelmente criativa porque ele nunca ouviu “não” como resposta.
4. E ISSO ME LEMBRA... RUBBER DUCK DEBUGGING
5. THE PRAGMATIC PROGRAMMER BY ANDREW HUNT AND DAVID THOMAS Andrew Hunt é um dos 17 autores do manifesto ágil. David Thomas é o autor da famosa frase "DRY" | Don't Repeat Yourself.
6. GRUNTJS O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO EM JAVASCRIPT.
7. MAS QUE TIPO DE TAREFAS O GRUNT VAI GERENCIAR PRA MIM? Testar Minificar Concatenar Compilar
8. E PORQUE USAR O GRUNT? A comunidade do grunt é enorme e cresce a cada dia, já são centenas de plugins do grunt que fazem praticamente tudo que você precisa.
9. E 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: 476 repositorios públicos 898 issues (a maioria pedindo para instalar o gruntjs nos projetos)
10. E POR ONDE COMEÇAR?
11. O grunt e os plugins do grunt são instalados e controlados pelo NPM, o gerenciador de pacotes do Node.js Para começar você tem que ter o node e o npm instalados na sua máquina.
12. MAS AFINAL, O QUE É NODEJS? O NodeJS é uma plataforma que foi desenvolvida em cima do V8 que é o motor de javascript do Chrome, aonde você pode escrever aplicações escaláveis em javascript.
13. E COMO EU INSTALO O NODEJS? Instalar o NodeJS é muito fácil: http://nodejs.org/ (Current Version: v0.10.18)
14. O NPM é o gerenciador de pacotes do Node.js, é por ele que você pode facilmente instalar programas em nodejs na sua máquina. https://npmjs.org/ O NPM não precisa ser instalado, ele vem com o nodejs.
15. n p m i n s t a l l - g g r u n t - c l i s u d o n p m i n s t a l l - g g r u n t - c l i VAMOS AO GRUNT: Para começar a usar o grunt, você tem que instalar o grunt-cli que é a interface de linha de comando do grunt: OU
16. Ele vai adicionar o comando grunt no ao seu terminal e permitir que você use esse comando em qualquer lugar. Porém o grunt-cli não instala o grunt em sí, o que o grunt-cli faz é rodar a versão do grunt que está instalada no seu projeto, o que permite que você tenha varias versões do grunt instaladas na mesma maquina simultaneamente.
17. COMO ELE FUNCIONA? Cada vez que você executa o grunt-cli ele usa o sistema de require do node pra encontrar um grunt instalado, o que permite que você tenha o grunt instalado nas pastas do seu projeto. Se ele encontrar um grunt instalado na pasta que você rodou o comando, ele carrega as bibliotecas do seu grunt aplicas as configurações dele e roda as tarefas que você pediu para ele rodar.
18. n p m i n i t Para usar o grunt nós precisamos de 2 arquivos básicos: O package.json e o Gruntfile.js (ou .coffee) e ambos devem ficar na pasta raiz do projeto.
19. n p m i n s t a l l g r u n t - - s a v e - d e v . AGORA SÓ PRECISAMOS INSTALAR O GRUNT NO NOSSO PROJETO:
20. Temos então a ultima versão do grunt instalado, só precisamos criar o nosso Gruntfile.js. O Gruntfile.js é composto pelas seguintes partes: A função "wrapper". As configurações do projeto e das tarefas. O carregamento dos plugins e das tarefas. As suas tarefas customizadas.
21. m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { ' u s e s t r i c t ' ; } ; A FUNÇÃO WRAPPER USA O OBJETO MODULE.EXPORTS DO NODEJS.
22. m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { ' u s e s t r i c t ' ; g r u n t . i n i t C o n f i g ( { p k g : g r u n t . f i l e . r e a d J S O N ( ' p a c k a g e . j s o n ' ) } ) ; } ; Ela vai receber um objeto grunt com um metodo initConfig onde você vai colocar as configurações do seu projeto e das tasks. As configurações do nosso projeto podemos passar para o grunt pelo arquivo package.json:
23. n p m i n s t a l l g r u n t - c o n t r i b - c o n n e c t - - s a v e - d e v . VAMOS ENTÃO INSTALAR UM PLUGIN DO GRUNT VIA NPM
24. m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { ' u s e s t r i c t ' ; g r u n t . i n i t C o n f i g ( { p k g : g r u n t . f i l e . r e a d J S O N ( ' p a c k a g e . j s o n ' ) } ) ; / / c a r r e g a n d o p l u g i n s g r u n t . l o a d N p m T a s k s ( ' g r u n t - c o n t r i b - c o n n e c t ' ) ; } ; Agora vamos carregar o plugin:
25. m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { ' u s e s t r i c t ' ; g r u n t . i n i t C o n f i g ( { p k g : g r u n t . f i l e . r e a d J S O N ( ' p a c k a g e . j s o n ' ) , c o n n e c t : { s e r v e r : { o p t i o n s : { p o r t : 9 0 0 1 } } } } ) ; / / c a r r e g a n d o p l u g i n s g r u n t . l o a d N p m T a s k s ( ' g r u n t - c o n t r i b - c o n n e c t ' ) ; / / r e g i s t r a n d o t a r e f a s g r u n t . r e g i s t e r T a s k ( ' c r e a t e s e r v e r ' , [ ' c o n n e c t : s e r v e r ' ] ) ; } ; E finalmente vamos registrar uma tarefa para o nosso plugin:
26. RAFAEL LYRA front end developer at apontador.com github: twitter: linkedin: rafaellyra @rafaellyra br.linkedin.com/in/rafaellyra/