26
WHY GOOD PROGRAMMERS ARE LAZY AND DUMB? Philipp Lenssen

Automação de tarefas com grunt

Embed Size (px)

DESCRIPTION

Slides do talk de automação de tarefas de frontend com GruntJS apresentado no DevCast do dia 24/9/13

Citation preview

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/