Upload
rafael-lyra
View
3.330
Download
2
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
WHY GOODPROGRAMMERS ARE LAZY
AND DUMB?Philipp Lenssen
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.
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.
E ISSO ME LEMBRA...RUBBER DUCK DEBUGGING
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.
GRUNTJSO GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITO
EM JAVASCRIPT.
MAS QUE TIPO DE TAREFAS O GRUNT VAIGERENCIAR PRA MIM?
TestarMinificarConcatenarCompilar
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.
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)
E POR ONDE COMEÇAR?
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.
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.
E COMO EU INSTALO O NODEJS?Instalar o NodeJS é muito fácil:
http://nodejs.org/ (Current Version: v0.10.18)
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.
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
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.
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.
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.
npm install grunt --save-dev.
AGORA SÓ PRECISAMOS INSTALAR O GRUNTNO NOSSO PROJETO:
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.
module.exports = function(grunt) { 'use strict';};
A FUNÇÃO WRAPPER USA O OBJETOMODULE.EXPORTS DO NODEJS.
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:
npm install grunt-contrib-connect --save-dev.
VAMOS ENTÃO INSTALAR UM PLUGIN DO GRUNT VIA NPM
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:
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:
RAFAEL LYRAfront end developer at apontador.com
github: twitter: linkedin:
rafaellyra@rafaellyra
br.linkedin.com/in/rafaellyra/