Transcript
Page 1: Automação de tarefas com grunt

WHY GOODPROGRAMMERS ARE LAZY

AND DUMB?Philipp Lenssen

Page 2: Automação de tarefas com grunt

PORQUE PREGUIÇOSO?Preguiçosos, porque apenas programadores preguiçosos irãoquerer 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 processosque vêm disso, disparados pela preguiça, irão aumentar a

produção.

Page 3: Automação de tarefas com grunt

E PORQUE IDIOTA?Isso porque para ele encontrar as melhores soluções a um

problema, precisa manter uma mente aberta e pensar fora dacaixa. De certa forma, isso leva à mentalidade de uma criança,

incrivelmente criativa porque ele nunca ouviu “não” comoresposta.

Page 5: Automação de tarefas com grunt

THE PRAGMATIC PROGRAMMER BY ANDREWHUNT AND DAVID THOMAS

Andrew Hunt é um dos 17 autores do manifesto ágil.

David Thomas é o autor da famosa frase "DRY" | Don't RepeatYourself.

Page 6: Automação de tarefas com grunt

GRUNTJSO GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO

EM JAVASCRIPT.

Page 7: Automação de tarefas com grunt

MAS QUE TIPO DE TAREFAS O GRUNT VAIGERENCIAR PRA MIM?

TestarMinificarConcatenarCompilar

Page 8: Automação de tarefas com grunt

E PORQUE USAR O GRUNT?A comunidade do grunt é enorme e cresce a cada dia, já sãocentenas de plugins do grunt que fazem praticamente tudo

que você precisa.

Page 9: Automação de tarefas com grunt

E QUEM USA O GRUNT?A Adobe usa o grunt no brackets.O jQuery usa o grunt no jQuery no jQuery UI e no QUnitO twitter usa o Grunt no TweetDeck e no TypeaheadO Apontador.com usa o grunt nos seus projetos.

... E BUSCANDO O TERMO GRUNTJS NO GITHUB EU ENCONTREI:

476 repositorios públicos898 issues (a maioria pedindo para instalar o gruntjs nosprojetos)

Page 10: Automação de tarefas com grunt

E POR ONDE COMEÇAR?

Page 11: Automação de tarefas com grunt

O grunt e os plugins do grunt são instalados e controladospelo NPM, o gerenciador de pacotes do Node.js

Para começar você tem que ter o node e o npm instalados nasua máquina.

Page 12: Automação de tarefas com grunt

MAS AFINAL, O QUE É NODEJS?O NodeJS é uma plataforma que foi desenvolvida em cima doV8 que é o motor de javascript do Chrome, aonde você pode

escrever aplicações escaláveis em javascript.

Page 13: Automação de tarefas com grunt

E COMO EU INSTALO O NODEJS?Instalar o NodeJS é muito fácil:

http://nodejs.org/ (Current Version: v0.10.18)

Page 14: Automação de tarefas com grunt

O NPM é o gerenciador de pacotes do Node.js, é por ele quevocê 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.

Page 15: Automação de tarefas com grunt

npm install -g grunt-cli

sudo npm install -g grunt-cli

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

Page 16: Automação de tarefas com grunt

Ele vai adicionar o comando grunt no ao seu terminal epermitir que você use esse comando em qualquer lugar.

Porém o grunt-cli não instala o grunt em sí, o que o grunt-clifaz é rodar a versão do grunt que está instalada no seu

projeto, o que permite que você tenha varias versões do gruntinstaladas na mesma maquina simultaneamente.

Page 17: Automação de tarefas com grunt

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 quepermite 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ê pediupara ele rodar.

Page 18: Automação de tarefas com grunt

npm init

Para usar o grunt nós precisamos de 2 arquivos básicos:

O package.json e o Gruntfile.js (ou .coffee) e ambos devemficar na pasta raiz do projeto.

Page 19: Automação de tarefas com grunt

npm install grunt --save-dev.

AGORA SÓ PRECISAMOS INSTALAR O GRUNTNO NOSSO PROJETO:

Page 20: Automação de tarefas com grunt

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.

Page 21: Automação de tarefas com grunt

module.exports = function(grunt) { 'use strict';};

A FUNÇÃO WRAPPER USA O OBJETOMODULE.EXPORTS DO NODEJS.

Page 22: Automação de tarefas com grunt

module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json') });};

Ela vai receber um objeto grunt com um metodo initConfigonde você vai colocar as configurações do seu projeto e das

tasks.

As configurações do nosso projeto podemos passar para ogrunt pelo arquivo package.json:

Page 23: Automação de tarefas com grunt

npm install grunt-contrib-connect --save-dev.

VAMOS ENTÃO INSTALAR UM PLUGIN DO GRUNT VIA NPM

Page 24: Automação de tarefas com grunt

module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json') });

//carregando plugins grunt.loadNpmTasks('grunt-contrib-connect');};

Agora vamos carregar o plugin:

Page 25: Automação de tarefas com grunt

module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), connect: { server: { options: { port: 9001 } } } }); //carregando plugins grunt.loadNpmTasks('grunt-contrib-connect'); //registrando tarefas grunt.registerTask('createserver', ['connect:server']);};

E finalmente vamos registrar uma tarefa para o nosso plugin:

Page 26: Automação de tarefas com grunt

RAFAEL LYRAfront end developer at apontador.com

github: twitter: linkedin:

rafaellyra@rafaellyra

br.linkedin.com/in/rafaellyra/