You are on page 1of 78

workflow

front end

Tabela de contedos
Incio 0
Introduo 1
No comeo era tudo TAG 1.1
HTML, CSS e Javascript eram suficientes 1.2
Antes do susto 1.3
Depois do susto 1.4
Para quem foi escrito 1.5
Nodejs, NPM e terminal 2
O que o nodeJS? 2.1
E o NPM? 2.2
Uma palavra sobre o terminal. 2.3
Versionamento e GIT 2.4
Comandos bsicos Unix para manipulao de arquivos 2.5
Configurando e iniciando o Git 2.6
Iniciando um repositrio local 2.7
Versionando nosso primeiro arquivo 2.8
Avaliando o histrico 2.9
Fundamentos do Github 3
Turbinando o NodeJS 4
Pensando fora do Browser 4.1
Instalando packages local ou globalmente 4.2
Package.json 4.3
Dependncias de produo vs. de desenvolvimento 4.4
Automatizao de tarefas 5
Criando a estrutura de diretrios 5.1
Instalando o GruntJS 5.2
Registrando tarefas 5.3
Criando os arquivos estticos 5.4
Executando Tarefas 5.5
Tarefas em lote 5.6

2
workflow front end

Consideraes finais 5.7

3
workflow front end

workflow front end


H poucos anos, bastava um programador front-end dominar o html, o css e javascript para
ter uma boa colocao no mercado. Logicamente, outras disciplinas eram includas nesse
pacote, como por exemplo: semntica do HTML, Javascript no bloqueantes,
acessibilidade, performance entre outras. Mas tudo girava em torno das trs tecnologias
principais.

Mas esse cenrio mudou. Somou-se s competncias acima outras habilidades tcnicas
como versionamente de arquivos, automatizao de tarefas, pr-processadores css,
NodeJS e NPM, para citar alguns. Estes so conhecimentos obrigatrios se voc quiser
entrar/se manter no mercado.

Com essa premissa em mente, fica fcil perceber que em pouqussimo tempo muitos novos
conhecimentos so exigidos aos profissionais da rea. Em contrapartida, encontrar material
de qualidade e com uma linguagem simples para quem est comeando no uma tarefa
muito fcil. Os tutoriais e artigos de agora esperam que voc j tenha a base, ou seja, j
tenha o NodeJS instalado e saiba mexer no terminal. No h um "Hello worldflow" (piadinha
ruim essa, ne!).

Se voc j entrou num artigo da internet e parou de l-lo no momento que encontrou um
texto parecido com "Digite npm install qualquer-coisa" voc sabe do que eu estou falando.

Este guia para voc que manja de HTML, CSS e Javascript, mas que precisa conhecer as
novas tecnologias que envolvem o universo front-end.

Alm disso, este guia ainda est em desenvolvimento. Avisarei pelo meu twitter
@tapmorales quando novos tpicos estiverem disponveis. Me segue l se voc quiser
saber quando tem coisa nova por aqui.

Para ler on-line, clique aqui.

Se encontrou algum erro, pode fazer um pull request aqui. Agradeo muito!

Seja muito bem-vindo. Espero que curta!

Daniel Tapias Morales

Esta obra est licenciado com uma Licena Creative Commons Atribuio 3.0 Brasil.

Incio 4
workflow front end

Introduo
Nesta introduo voc conhecer os motivos que me levaram a escrever esse guia. Saber
para quem ele foi escrito e o que voc aprender at o final da leitura.

Introduo 5
workflow front end

No comeo era tudo TAG


Me lembro at hoje o momento em que criei o meu primeiro arquivo html. Isso foi l pelos
anos 1999, bem no meio da bolha. Eu abri um simples arquivo do notepad, escrevi um ol
mundo envolto por uma simples tag h1 e salvei o arquivo na rea de trabalho com uma
nova extenso, a tal da .html. E quando eu abri o arquivo com um duplo clique,
magicamente ele no abriu mais no bloco de notas, mas sim num programa muito melhor, o
Netscape navigator.

Algum tempo depois apareceu uma tecnologia revolucionria para formatao de pginas
chamada CSS. Adeus <font face="Tahoma" size="2"> . Aprendi vrias novas propriedades
de CSS que me ajudavam a colocar caractersticas visuais em meus sites montados com
tabelas. Uma beleza!

Tambm aprendi javascript para que eu pudesse mostrar a data e a hora e oferecer um
pop-up de boas-vindas a todos os meus visitantes. Aahh! que saudade do window.open !

No comeo era tudo TAG 6


workflow front end

HTML, CSS e Javascript eram suficientes


Por muito tempo isso foi tudo o que era preciso saber para trabalhar como webdesigner.
Com o tempo, fui me aprofundando nessas tecnologias e adquiri experincia construindo
coisas mais interessantes do que simplesmente mostrar a data e um menu pop-up (Eu
estou falando de janelas modais, carrosseis, validao de formulrio e menus drop-downs.
Talvez no futuro algum fale desses caras com certa nostalgia. Assim como eu fiz quando
lembrei do window.open).

A verdade que at o final de 2013, trabalhando numa grande agncia de publicidade,


onde os projetos tm prazos curtos e ficam pouco tempo no ar, essas tecnologias eram tudo
o que eu precisava. L, as vezes eu desenvolvia um projeto em uma semana para uma
campanha que iria ficar on-line por 30 dias ou menos.

Nessa poca, j havia surgido muita coisa na rea de front-end: node.js, automatizao de
tarefas, pr-processadores CSS, etc. Mas como no via chances de usar essas coisas na
agncia, dei uma lida sobre esses assuntos, mas logo me esqueci de tudo pela falta de
utilizao prtica.

HTML, CSS e Javascript eram suficientes 7


workflow front end

Antes do susto
Mas algo muito positivo aconteceu na minha vida. Sa da agncia onde os projetos tinham
data de nascimento e de bito definidas e fui trabalhar numa empresa onde eu tive a
oportunidade de desenvolver produtos que teriam vida longa. Aplicativos baseados na web
que seriam usados por muitas pessoas, e em diversos dispositivos. E agora? At d pra
desenvolver aplicativos web usando javascript e jquery, (com um mnimo de padro de
projeto, por favor). Mas e a performance? Minificar e concatenar arquivos? Sprites de
imagens? Eu at sabia tudo isso na teoria, mas na prtica, nada. Eu precisava mudar isso.
E rpido.

Ento fui procurar material na internet. Procurei sobre automatizao de tarefa e fui levado
ao site do grunt.js. O link "Getting Started" onde devemos clicar para aprender algo, no
mesmo? A primeira linha, do primeiro pargrafo, na primeira pgina que abro, diz o
seguinte:

"Grunt and Grunt plugins are installed and managed via npm, the Node.js package
manager."

Mas whata? npm? node.js? Ok. Tinha que correr atras do prejuzo. Achei que seria mais
fcil ver como o GruntJs funciona na prtica. Googlei novamente e abri um site famoso em
portugus que dizia:

...para instalar, digite:


sudo npm install -g grunt-cli

Digitar? Onde? Como assim?

Com um pouco de receio, entrei no site nodejs.org para saber mais sobre essa tecnologia.
Confesso que o texto a seguir no me esclareceu muito:

"Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an


event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js'
package ecosystem, npm, is the largest ecosystem of open source libraries in the world."

Foi a partir desse ponto que eu fechei todas as abas do navegador. Abri meu Sublime e
continuei com o velho e bom javascript. Do jeito que sempre foi. Ah, javascript, seu lindo!

Antes do susto 8
workflow front end

Depois do susto
Mas claro que se eu me propus a escrever todo esse texto que se segue porque eu
superei esse trauma inicial e, sem a presso do dia-a-dia, fui estudando aos poucos, noite
e aos finais de semana. Sem presso, sem prazo.

Fui descobrindo aos poucos sobre como essas novas tecnologias funcionavam e onde me
seriam teis.

Ainda tenho muito o que aprender. Comecei os meus primeiros passos agora (no incio de
2015). Mas creio que mesmo com pouco tempo de experincia trabalhando esse workflow
front-end j tenho a base slida e consiga passar esse conhecimento adiante.

Depois do susto 9
workflow front end

Para quem foi escrito


Com este material pretendo ajudar a galera que est comeando agora e que j conhece e
consegue se virar com Javascript, HTML e CSS. Se voc se identificar com alguns dos
aspectos abaixo, esse material pra voc:

Manjo de javascript mas gostaria de melhorar meu workflow front-end para


desenvolvimento de sites ou aplicativos.
Quando abro um tutorial na internet que comea com uma frase parecida com "Para
comear, digite sudo npm install ", ou - pior ainda - "Basta voc digitar npm install ",
fecho-o imediatamente antes que me contamine.
Sei da importncia da performance de um site ou aplicativo, mas continuo entregando
os mesmos javascripts de desenvolvimento em produo.
Versionamento? Claro! Sempre copio e colo a pasta de projetos colocando a data no
nome da pasta. Alm disso, nunca apago um trecho de cdigo javascript. Sempre
comento cdigo velho que no est sendo mais necessrio. Vai que eu precise dele no
futuro. Nunca se sabe!
Eu ainda uso o bom e velho FTP para subir meus arquivos no servidor. Nunca falha.

Se voc se identificou com alguns pontos descritos acima, espero que este material seja til
para voc.

Se resolver continuar a leitura, voc:


Ir perder o medo do terminal.
Ir conhecer um dos pr-processadores mais famosinhos do momento: o Sass.
Concatenar e minificar seus javascripts e css. Acredite: moleza e vale a pena.
Nunca mais ir comentar cdigos velhos com medo de precisar deles no futuro.
Nunca mais ir colocar seus arquivos de desenvolvimento em produo.
No se assustar se abrir um tutorial na net que comea pedindo para voc digitar algo
comeando com npm install. Voc saber o que isso significa e onde dever digitar
esse cdigo maluco.

Ou seja, No final deste livro (se que posso cham-lo assim), voc ter uma base slida
para iniciar o desenvolvimento de aplicativos para a web. Hoje em dia, saber HTML, CSS e
Javascript no suficiente. Voc precisa conhecer versionamento (Git e GitHub). Voc
precisa instalar uma ferramenta de build (Grunt ou Gulp). Voc precisa saber manipular um

Para quem foi escrito 10


workflow front end

gerenciador de dependencias (NPM ou NPM + Bower), e se souber tambm um pouco


sobre pre-processadores CSS, ter uma maior produtividade e acrescentar no teu
currculo.

O que voc no ver aqui


Detalhes sobre javascript, jquery, css e html. Espero que voc j possua esses pr-
requisitos.
No vou desenvolver nenhum sistema do zero, e voc no ser um ninja em Node.js.
Meu intuito fazer com que voc saiba o bsico, que eu adoraria que algum tivesse
me contado quando comecei a desenvolver aplicativos para a web.
No vou explorar nenhum framework em particular. Pelo menos no por enquanto.
Mesmo sobre os assuntos que me proponho a explicar, por vezes no serei 100%
fidedigno. Me proponho a explicar de um jeito fcil de entender. Provavelmente, se
algum tivesse feito isso comigo quando eu estava comeando a entrar nesse terreno,
algumas pedras sairiam do caminho antes de eu tropear. Pense assim: Se voc
tivesse que explicar javascript para algum que est comeando, provavelmente voc
no se preocuparia em explicar sobre escopo de variveis. Estou quase certo que as
suas variveis estariam todas no escopo global. E sabemos que isso no uma boa
prtica. Contudo, se entrar muito nesse nvel de detalhe talvez voc assuste o iniciante
e o faa desistir antes mesmo de tentar. Nesse caso, no importa que o seu cdigo se
parea com:

var texto = "Ol mundo";


alert(texto);

Mesmo que isso no seja uma boa prtica fcil de entender. Lembre-se: os meus
exemplos no tm a intenso de serem escritos como na vida real, contudo, espero te
mostra a base para que, depois, voc possa avanar com os seus estudos.

Softwares utilizados:
Sistema Operacional:
Eu sei que h na comunidade um certo estrelismo por quem usa o mac ou linux. No quero
entrar nesse mrito. Sei tambm que h um certo preconceito com o windows. Tambm no
quero discutir isso. Mas o fato que eu, desde o comeo da minha carreira, trabalhei com
windows. Portanto, no vou escrever nada que eu no tenha proficincia. Tudo que voc

Para quem foi escrito 11


workflow front end

ver aqui voltado para o windows. Muitas coisas iro servir mesmo que voc use o mac
ou linux, mas no me comprometo com isso, uma vez que no tenho know-how nesses
sistemas. Combinado?

Editor de cdigo:
H vrios editores de cdigo disponveis no mercado e voc provavelmente utiliza o
Sublime Text com o package manager instalado e, no mnimo, o emmet. Isso no
primordial, mas sugiro que d uma olhada no Sublime, se ainda no o conhece. No faz
diferena, nesse momento, se voc usa o Notepad++, o Text Edit, o Brackets ou o
Dreamweaver. Antes que chova pedra na minha cabea, quero me explicar: j v cdigos
muito mais semnticos e corretos escritos no Dreamweaver do que cdigos escritos por
pessoas que se achavam cools s porque usavam o Notepad ou Sublime. A ferramenta no
importante. O que importa o desenvolvedor. claro que com o tempo os devs com mais
experincia tendem a abandonar o Dreamweaver e comear a utilizar um editor de cdigo
melhor. Mas isso no importa realmente. Se voc usa o Dreamweaver, pense em ao menos
experimentar algo diferente. E por falar nisso, eu comecei a escrever HTML usando o
programa at ento da Macromedia. Foi de l que vieram os meus primeiros <h1> s. E no
h nada de errado nisso.

No prximo captulo iremos entender de uma vez por todas o que o nodejs, o NPM e o
que um programa do tipo terminal.

Para quem foi escrito 12


workflow front end

Nodejs, NPM e terminal


Nesta seo voc saber, sem muitas explicaes tecnicas demais, o que esse tal de
NodeJS. Saber o que um terminal e o que o NPM. Se voc nunca mexeu num terminal
e isso te assusta um pouco, fique tranquilo. Ao final dessa leitura voc no dominar em
detalhes a linha de comando, mas conseguir se virar bem com qualquer tutorial da internet
que espera que voc j saiba o que um programa de linha de comando.

Boa leitura!

Nodejs, NPM e terminal 13


workflow front end

NodeJS, NPM e terminal

O que o NodeJS?
por causa do NodeJS que estamos aqui nesse momento. Foi a partir do NodeJS que o
javascript, que antes era vista como uma linguagem inferior, ganhou notoriedade no
mercado de desenvolvimento web. Depois do NodeJS, vieram o Express js (framework para
criar servidores web com javascript), Grunt e Gulp (para automatizao de tarefas) e at
mesmo banco de dados NoSQL, como o mongoDB.

Esquea as definies muito tcnicas que voc possa ter visto em sites que tratam do
assunto. Elas esto corretas, mas so difceis de entender. A partir de agora, pense no
NodeJS como um software que voc instala no seu sistema operacional, que permite voc
rodar cdigos javascripts fora do Browser.

Quando percebi isso meu crebro cresceu alguns milmetros. Vou repetir, dando nfase no
que considero mais importante:

O Node.js um software, que voc instala no seu sistema operacional, e que permite
que voc rode cdigos javascripts fora do Browser.

Mas como isso foi possvel? Simples, desenvolveram o NodeJS usando como base a tal da
V8, que a engine que interpreta o javascript no Google Chrome. Fantstico! Ou seja, com
o NodeJS, voc no depende mais do browser para ler e interpretar seus arquivos
javascripts.

Mas e aquela definio do NodeJS retirada do site nodejs.org. No se preocupe por


enquanto. Lembre-se que no necessrio entender o escopo de variveis quando
estamos comeando aprender javascript.

Sabendo disso, hora de instalar o NodeJS. No vou detalhar esse processo por ser bem
simples. Basta fazer o download e dar um duplo clique no executvel. Depois de alguns
"Next" clique em "Finish". Depois de instalado, seu sistema poder rodar arquivos
javascripts fora do browser. Vai l em https://nodejs.org. Eu te espero.

O que o nodeJS? 14
workflow front end

E o NPM?
O NPM um gerenciador de pacotes do NodeJS. atravs dele que instalamos e
desinstalamos mdulos (os pacotes, ou packages) que expandem as funcionalidades dessa
ferramenta. Para facilitar o entendimento, vou utilizar uma analogia. Pense no node como
sendo o seu Sublime Text. Se voc j programa para a web, provavelmente j instalou
algum plugin (como se fosse os mdulos do node). Portanto, j deve ter instalado o
Package manager do Sublime, certo? O Package manager gerenciador de pacotes do
Sublime, assim como o NPM o gerenciador de pacotes do NodeJS.

Uma diferena que atravs do NPM podemos instalar mdulos (no vou mais falar que
so plugins, ok?) tanto localmente (em cada projeto) quanto globalmente (no NodeJS
instalado em seu sistema operacional).

As verses mais recentes do NodeJS j vm com uma verso do NPM, portanto, no h


nada o que fazer, s sair usando. O que significa que j pode instalar ou desinstalar
mdulos digitando poucos comandos no terminal.

E o NPM? 15
workflow front end

Uma palavra sobre o terminal.


Antigamente, quando o computador era feito de pedra e ainda no existia uma interface
grfica (GUI) para interagirmos com a mquina, a maioria de ns tinha que dizer ao
computador o que fazer atravs de alguns comandos bsicos que eram digitados numa
interface do tipo terminal, ou, se preferir, uma interface de linha de comando (CLI -
command line interface). Criar diretrio, apagar, renomear ou criar um arquivo eram tarefas
triviais e executadas por estas linhas de comando, e no por cliques do mouse. Vivamos
muito bem com isso. Porm, quando o Windows chegou (vale lembrar que o Windows no
foi o primeiro sistema operacional com interface grfica, mas foi o que dominou o mercado
de computadores pessoais), a facilidade de executar as mesmas tarefas com poucos
cliques do mouse fez com que rapidamente esquecssemos de tais comandos.

Ainda hoje possvel digitar os mesmos comandos pelo prompt de comando do Windows
(No mac ou linux, no h prompt de comando, e sim o terminal, que quase a mesma
coisa). Faa um teste, se voc j instalou o NodeJS, abra o prompt de comando (Aperte a
tecla Windows + R, digite cmd e aperte Enter) e digite node -v . Voc dever ver no output
do terminal a verso do node instalado em sua mquina.

Agora que voc j sabe como digitar comandos no prompt do Windows, devo alert-lo: No
o faa mais. Ns nunca mais iremos usar o prompt de comando do windows (cmd) para
esta tarefa.

A princpio parece que usar o prompt de comandos do windows uma boa alternativa, uma
vez que j est instalado na mquina, prontinho para uso. Mas o fato que o CMD um
tipo de terminal que aceita apenas os comandos usados no antigo sistema operacional
MSDOS, e no aceita os comandos usados em sistemas Unix.

H muitos desenvolvedores que no utilizam o Windows como sistema operacional.


Portanto, uma boa prtica usar um terminal que converse a mesma lngua de outros
sistemas operacionais. Isso vai fazer voc evitar problemas de compatibilidade e ser um
profissional mais preparado para trabalhar com outros sistemas alm do Windows.
Convenci?

Existem vrias interfaces do tipo terminal, mas ns vamos usar uma que instalado no
momento que comearmos a versionar nossos arquivos usando o GIT. Ns usaremos um
cara chamado Git Bash. O motivo que com o Git Bash ns podemos simular comandos
Unix no Windows. Acredite, voc ir querer isso.

Uma palavra sobre o terminal. 16


workflow front end

No prximo captulo, conheceremos o bsico sobre versionamento, instalaremos o git para


Windows, conheceremos alguns comandos bsicos no git bash e criaremos nosso primeiro
repositrio no GIT.

At l!

Uma palavra sobre o terminal. 17


workflow front end

Versionamento e GIT
Tanto no desenvolvimento de sistemas para web quanto na criao de websites, muito
importante que voc saiba versionar os seus arquivos. Mesmo que voc seja uma pessoa
regrada e que faa backup do seu site/aplicativo todos os dias em Pendrivers ou deixe-os
na nuvem, como o DropBox, o gerenciamento dessas verses impraticvel. Voc nunca
se lembra o que foi feito na semana passada e se algo quebrar, voc precisa comparar os
arquivos manualmente para descobrir o cdigo que gerou o bug.

Versionar arquivos uma tarefa bsica e trivial que todos ns devemos ser capazes de
executar sem pestanejar.

Se voc usa Windows, eu tenho uma notcia boa e uma m para voc. A boa: h uma
ferramenta que faz o versionamento atravs de uma interface grfica muito elegante. bem
simples mexer e voc adoraria trabalhar com ela. A m: ns no vamos nem chegar perto
dessa ferramenta. Motivo: no comeo, eu tambm me senti atrado por poder versionar
meus arquivos sem a necessidade de digitar linhas de comandos. O problema que com o
tempo voc percebe que precisa ter um maior controle sobre esse versionamento, e esta
ferramenta que deveria facilitar a tua vida acaba se tornando um problema. Alm do mais,
trabalhar com o Git por linha de comando moleza, voc vai ver.

Dito isto, quero explicar a base sobre os sistemas de verso.

Um sistema de versionamento que se preze precisa efetuar bem duas tarefas:

1. Armazenar registros temporais da evoluo de seu sistema. como se voc


conseguisse tirar uma fotografia do seu projeto num determinado instante e inserir uma
legenda nessa fotografia. Essa legenda chamada de commit. Cada commit um
registro do seu projeto numa linha de tempo.
2. Gerenciar conflitos em um mesmo arquivo se este for editado por mais de uma pessoa
ao mesmo tempo. Muitas vezes o Git capaz de lidar com esses conflitos de maneira
espetacular. Outras vezes o Git no sabe qual a verso correta, e ento os
desenvolvedores envolvidos devem decidir qual a verso que deve ficar para a
histria do projeto.

Instalando
Para instalar o Git para windows, acesse https://git-for-windows.github.io/ e faa do
download do executvel. No momento da escrita deste texto, o Git para windows estava na
verso 2.6.2.

Versionamento e GIT 18
workflow front end

Siga as imagens abaixo para terminar sua instalao

Versionamento e GIT 19
workflow front end

Na tela acima deixe marcada somente a primeira opo. Isto mais seguro, pois far que o
git seja usado somente a partir do Git Bash.

Versionamento e GIT 20
workflow front end

J a tela acima sobre quebra de linhas. Como os sistemas operacionais possuem


formatos diferentes de quebra de linhas em aquivos de texto, deixar marcada a primeira
opo normaliza isto. Explicando: a primeira opo converte para o padro Windows
quando os arquivos chegam at voc. Quando voc efetuar um commit ser convertido
para o formato Unix. A segunda no faz nenhuma converso quando o arquivo chega,
apenas converte para Unix quando comitamos. J a terceira opo no faz nenhum tipo de
converso. Deixe marcada a primeira opo.

Versionamento e GIT 21
workflow front end

Agora que temos o git instalado e configurado, na prxima seo vamos dar uma olhada
rapidamente em alguns comandos Unix para manipulao de arquivos.

Versionamento e GIT 22
workflow front end

Comandos bsicos Unix para manipulao


de arquivos
Voc j efetuou vrias tarefas de manipulao de arquivos usando um interface grfica. J
criou, deletou, renomeou arquivos e pastas e j moveu arquivos dentro do seu HD. Voc
est to acostumado a fazer isso com o mouse que parece uma idiotice ter que aprender a
fazer isso via linha de comando. A primeira impresso que voc perder muito mais
tempo digitando comandos extensos do que simplesmente dando alguns cliques no mouse
e/ou alguns atalhos do teclado. Talvez voc esteja certo. Mas talvez no. Mesmo que se no
final deste captulo voc continuar usando a interface grfica para efetuar estas tarefas,
bom conhecer outras possibilidades. O fato que saber operar o terminal primordial se
voc quiser evoluir na rea de desenvolvimento front-end, e conhecer o mnimo de
manipulao de arquivos um excelente ponto de partida.

Uma vez que voc instalou o Git for Windows na sua mquina da maneira como eu descrevi
na seo anterior, voc ganhou de presente o "Git Bash", que um programa do tipo CLI
(command line interface) que simula um terminal do Unix no Windows, alm de permitir que
voc digite os comandos do Git.

Abra o Git Bash de maneira trivial, procurando-o no menu iniciar ou em algum atalho criado
na instalao.

A primeira observao importante que, para cada usuario presente na mquina h uma
pasta chamada "pasta pessoal" (tambm conhecida como pasta "Home"). No Windows,
essa pasta fica em c:/Users/Seu_usuario. Ao abrir o Git Bash pela primeira vez voc estar
"visualizando" essa pasta, muito provavelmente.

Uma outra maneira de abrir o Git Bash a partir do Windows clicar com o boto direito do
mouse dentro de um diretrio qualquer e selecionar a opo "Git Bash Here". Nesse caso
voc no estar visualizando a sua pasta pessoal, mas sim a pasta a partir da qual voc
abriu o Git Bash.

A segunda observao importante que voc provavelmente est vendo algo parecido
com:

seu_usuario@host MINGW64 ~ $

Vamos entender o que cada informao acima.

Antes do arroba o seu usurio logado no sistema.


Depois do arroba significa o nome da sua mquina, ou host.

Comandos bsicos Unix para manipulao de arquivos 23


workflow front end

MINGW64 uma varivel de sistema. No se preocupe com ela.


~ um atalho para sua pasta "Home". ( o mesmo que sua pasta pessoal, mas o nome
"Home" mais correto, pois assim que chamado em ambientes Linux). Se voc no
estiver vendo esse sinal de til, provavelmente voc abriu o terminal com o boto direito
do mouse sobre um diretrio qualquer. Para acessar sua pasta Home, digite $ cd ~ e
aperte o enter.
O sinal de cifro significa que voc um usurio padro da mquina.

Para ter certeza de qual diretrio est sendo visualizado, digite no terminal (A partir desse
ponto, sempre que eu me referir ao terminal, ou linha de comando, estarei falando do Git
Bash, ok?):

$ pwd

Esse comando significa "print working directory" e serve para visualizar a pasta corrente

Se voc quiser visualizar os arquivos e pastas no ocultas no diretrio corrente, basta


digitar:
$ ls

Esse comando parecido com o comando dir do MSDOS, porm, estamos simulando um
ambiente Unix e o comando dir no existe nesse ambiente.

Se voc quiser entrar em alguma pasta, basta digitar o comando cd (change directory).
Por exemplo:
$ cd Desktop

A partir desse ponto voc est visualizando a sua rea de trabalho, experimente efetuar
novamente os comandos ls e pwd nessa pasta.

Se voc quiser voltar um nvel, basta digitar


$ cd ..

O sinal ".." significa "um nvel acima". Nesse ponto estamos novamente acessando a pasta
pessoal. Tente voltar dois nveis de uma vez:
$ cd ../..

Agora estamos visualizando o C:. Para voltar para a sua pasta pessoal, voc poderia digitar
cd Users/seu nome ou simplesmente usar um atalho, como a seguir:

$ cd ~

o sinal "til" um atalho que aponta para o seu diretrio Home, lembra?

Se voc quiser descobrir a pasta pessoal de qualquer diretrio ou partio no seu


computador, basta digitar :

Comandos bsicos Unix para manipulao de arquivos 24


workflow front end

$ echo ~

Esse comando te mostrar qual a pasta pessoal mas no "navega" at ela

Criar um diretrio onde salvaremos todos os


exemplos desse livro.
Eu recomendo que para os exemplos desse livro, voc salve seus arquivos no seu diretrio
Home. No futuro, nos projetos da vida real, fique a vontade para trabalhar na estrutura de
arquivos que voc preferir. O motivo que ao trabalharmos no diretrio Home, ns temos a
mesma estrutura de pastas e arquivos, sendo assim ficar mais fcil e mais didtico
acompanhar a leitura deste guia.

Antes de criarmos o diretrio principal, tenha certeza que voc est lugar certo, digite $ cd
~

Como vimos, esse comando far voc acessar a sua pasta pessoal, independente de qual
diretrio estiver sendo acessado anteriormente.

Confirme isso digitando $ pwd

Nesse ponto, vamos criar um diretrio que conter todos os exemplos deste livro. Digite: $
mkdir Projects

Esse comando criar um diretrio chamado Projects. Para ter certeza que foi criado
corretamente. $ ls

Voc dever visualizar a pasta "Projects" na lista que aparecer no terminal. Criamos o
diretrio, mas ainda no estamos "dentro" dele. Como fazemos mesmo para trocar o
diretrio corrente? $ cd Projects . Isso mesmo. Mas nesse ponto eu quero te dar uma dica.
O Git bash possui um autocomplete que facilita muito a nossa vida. Para v-lo em ao,
tente digitar: $ cd Pro (se sem continuar a palavra, aperte TAB do teclado. Faa uns testes
com $ cd P (TAB), $ cd Pr (TAB). Veja o que acontece. Muito til.

Ser que est tudo certo? Se estiver no diretrio Projects, digite $ pwd para vermos o
diretrio corrente. Observe que, como este diretrio est vazio, digitar $ ls no produzir
nenhum resultado.

J temos o bsico necessrio para comearmos a versionar nossos arquivos com o Git.
Mas claro que h muito mais comandos Unix para aprender. Se voc quiser estudar por
conta prpria, sugiro alguns comandos iniciais: cp, mv, rm e rmdir. Com esses comandos
voc consegue fazer tudo o que fazia com o mouse e o Windows, s que agora via terminal.
No s uma questo de se sentir cool. Mais cedo ou mais tarde voc precisar editar um

Comandos bsicos Unix para manipulao de arquivos 25


workflow front end

arquivo diretamente no servidor, e para fazer isso, voc precisar de um editor de cdigo do
tipo terminal, como o VIM ou o Emacs (d tchauzinho ao seu Sublime Text nessas
situaes).

Comandos bsicos Unix para manipulao de arquivos 26


workflow front end

Configurando e Iniciando o Git


Os passos a seguir precisam ser efetuados somente uma vez a cada instalao do Git.

No terminal, digite:
$ git config --global user.name "Seu nome"

$ git config --global user.email "seu e-mail"

Como o Git um programa de versionamento, normalmente usado para trabalhos em


equipe, necessrio se identificar para que ele saiba quem o dono de cada commit
(lembre-se que um commit um registro temporal - uma fotografia - do site/aplicativo).

Pronto, isso basta para comearmos a versionar nossos arquivos.

Configurando e iniciando o Git 27


workflow front end

Iniciand um repositrio local


Estando no diretrio Projects, vamos criar mais um diretrio chamado
"PrimeirosPassosWorflow" e acess-lo em seguida. (importante: nunca coloque espaos ou
caracteres especiais, como acentos ou cedilhas em nomes de arquivos ou pastas)

$ mkdir PrimeirosPassosWorflow

$ cd primeirosP (TAB + ENTER)

Agora, ns precisamos pedir ao Git para tomar conta dessa pasta pra gente, e ele
gentilmente cuida para que nenhum arquivo ou verso se perca no decorrer do tempo. A
no ser que a sua mquina pegue fogo ou o seu HD resolva fritar. Mas ainda assim h
servios que permitem voc colocar suas verses na nuvem. Tem um servio desses que
um dia ficar famosinho. um tal de GitHub. conhece? :-P

Voltando nossa realidade, precisamos dizer ao Git que cuide no nosso diretrio corrente
( $ pwd , ok?).

Estando no diretrio que queremos versionar, vamos digitar:

$ git init

Ao fazermos isso, aparece uma mensagem no terminal informando que um repositrio vazio
foi criado. Isso significa que agora uma pasta .git foi criada no diretrio
PrimeirosPassosWorflow.

Ao digitarmos $ ls esperaramos ver o diretrio mencionado acima. Mas isso no


acontece. Por qu? O motivo que o diretorio .git oculto (esse "." inicial significa que um
arquivo ou diretrio oculto).

Porm, ao digitarmos $ ls, podemos perceber que os arquivos ocultos no esto listados,
mas eu garanto que ele est l. Quer ver? Ento digite: $ ls -a

Com isso aparece no terminal algo como: . .. .git

O primeiro "." significa o diretrio corrente. O ".." significa diretrio acima (nvel acima,
diretrio pai, como voc preferir). Ns j sabemos do que se trata o ltimo ".git".

Dica 1: o nome correto para esse smbolo "-a" que digitamos acima flag a. As flags
servem para passar informaes adicionais ao comandos via terminal.

Dica 2: no altere nada dentro da pasta ".git". Dizem que ao fazer isso um urso coala morre.

Iniciando um repositrio local 28


workflow front end

Versionando nosso primeiro arquivo


Nesse ponto j temos o Git cuidando do nosso diretrio, ou seja, versionando nossos
arquivos.

Vamos ento criar nosso html simples com um Ol mundo git.

Para isso, vou abrir a minha pasta diretamente no Sublime para que eu consiga visualizar
meus arquivos diretamente no painel lateral deste editor.

Vou criar um novo arquivo nesse diretrio clicando com o boto direito do mouse e salvar
como exemplo01.html. Segue o cdigo:

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>exemplo 01</title>
</head>
<body>
<h1>Primeiro exemplo com o Git</h1>
</body>
</html>

Agora vamos pensar. Eu tenho um diretrio que est sendo monitorado pelo Git chamado
PrimeirosPassosWorflow . Eu inclu um arquivo dentro desse diretrio, logo, o Git comeou
a version-lo. Certo? Errado. Essa a primeira pegadinha do Git. O fato de termos um
repositrio git, ou seja, um diretrio sendo monitorado, no versiona arquivos criados
automaticamente. preciso que para cada arquivo includo seja informado ao git para
monitorar tambm esse arquivo. Mais para frente vamos ver uma maneira de incluir vrios
arquivos de uma vez, mas por hora, vamos provar isso que eu acabei de dizer. Digite no
seu terminal:
$ git status.

Voc ver uma mensagem informando que h um arquivo "untracked", ou seja, este arquivo
est num repositrio do git, mas no est sendo "rastreado". Vamos corrigir isso incluindo
esse arquivo numa rea especial dentro do git responsvel por "fotografar" seus arquivos a
cada commit. essa rea especial chamamos de "stage". Digite:

$ git add exemplo.html e tecle ENTER

Novamente, digite $ git status para entendermos o que aconteceu.

Versionando nosso primeiro arquivo 29


workflow front end

Agora podemos ver que esse arquivo est pronto para ser fotografado, isto , comitado (O
verbo comitar, assim como googlar ou twittar, no existem de fato, mas muito comum no
nosso meio).

Legal! Temos uma pasta que transformamos num repositrio git ( git init ), informamos
que queremos rastrear as mudanas feitas no nosso primeiro arquivo, colocando-o na rea
de stage ( git add ), mas at agora este arquivo no foi comitado de fato. Para resolver
isso, digite no seu terminal:
$ git commit -m "primeiro comite lindo"

a flag -m usada para informar uma mensagem de commit. muito importante que as
mensagens de seus commits sejam descritivas e especficas das tarefas executadas
naquele momento. Por exemplo, "alterao de endereo na pgina de contato", "incluso
da funcionalidade buscar cep" ou "alterar banner da home - campanha natal 2016" so
bons nomes de commits pois permitem facilmente identificar o momento em que as
alteraes foram efetuadas. Ao passo que: "correo de bugs diversos", "nova
funcionalidade na pgina de compras" ou "incluir banner" so poucos especficos e de
pouco valor. Fique atento s suas mensagens de commits.

Prontinho. Nosso primeiro commit foi feito. Vamos verificar:

$ git status (dica: voc pode executar comandos escritos recentemente no terminal

apertando as teclas para cima e para baixo do teclado).

Na sada do terminal, a ltima linha a que nos interessa. "nothing to commit, working
directory clean". Ou seja, tudo est atualizado.

Vamos agora voltar ao Sublime, criar um paragrafo qualquer no nosso arquivo html e salvar.

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>exemplo 01</title>
</head>
<body>
<h1>Primeiro exemplo com o Git</h1>

<p>um texto qualquer</p>


</body>
</html>

Vamos investigar como est o nosso repositrio git nesse momento (depois de alterar e
salvar, no se esquea, salvar muito importante).
$ git status

Versionando nosso primeiro arquivo 30


workflow front end

O git nos d duas informaes muito importantes. A primeira que h mudanas que no
esto na rea de stage, portanto, ainda no esto prontas para o prximo commit. A
segunda uma consequncia da primeira, ou seja, no h mudanas para ser comitadas.

Essa a segunda pegadinha do Git. Ao alterarmos um arquivo que foi comitado


previamente, precisamos inclu-lo novamente na rea de stage e s depois podemos
comit-lo. Ento vamos l:

$ git add exemplo01.html

$ git commit -m "inclusao de paragrafo".

Agora que ns temos o nosso primeiro html versionado, quero que voc execute algumas
tarefas:

1. criar um arquivo de estilo css/estilo.css


2. criar uma arquivo de javascript: js/app.js
3. criar um contedo qualquer dentro desses arquivos
4. vincular os dois arquivos sua pgina html.

Para referncia, segue um exemplo bem bobinho que fiz apenas para mostrar:

estilo.css:

body{
background: #ccc;
}

app.js

var body = document.body;


body.style.color = 'red';

Nesse ponto vale uma dica: com o comando ls muito difcil identificar o que arquivo e
o que diretrio. Faa um experimento, digite no terminal $ls --color e veja o que
acontece.

Depois de vincul-los sua pgina, digite $ git status e analise o output no terminal. Se
tudo estiver bem, voc dever ver que um arquivo j comitado anteriormente foi modificado,
porm, os dois arquivos criados no esto sendo rastreados pelo Git, ou seja, no esto
sendo versionados. Como so apenas dois arquivos, voc poderia inclu-los um a um com o
comando $ git add . Porm, pense no caso de termos muitos arquivos, como fontes,
imagens, audios, vdeos etc. Nesse caso, inclu-los um a um faria voc desistir do
versionamento nos primeiros dez arquivos.

Versionando nosso primeiro arquivo 31


workflow front end

Para incluir todos os arquivos de uma vez, voc poderia digitar o seguinte comando: $ git
add .

Observe o ponto no final. Esse sinal o mesmo que dizer "todos os arquivos".

Faa o teste: digite o comando acima e em seguida veja o que acontece quando voc
verifica o status novamente.

Com tudo adicionado rea do stage, que informa que os arquivos esto preparados para
serem comitados, basta voc efetuar o comite normalmente
$ git commit -m "Incluso de javascript e css"

Fcil, n? Inclumos todos os arquivos que no estavam na rea de stage de uma nica vez
e depois comitamos normalmente. Contudo, digamos que depois do comite efetuado, o
cliente pediu algumas alteraes que precisam ser efetuadas tanto no arquivo de estilo
quanto no arquivo de javascript. Como queremos manter o histrico, vamos alterar esses
arquivos e efetuar um novo comite. Ento vai l. Altere os seus arquivos (pode ser qualquer
alterao mesmo, ok).

Pronto? agora digite $ git status novamente. Repare que Git nos mostra no output do
terminal que dois arquivos (previamente adicionados rea do stage) foram modificados. E
tambm nos d uma dica do que podemos fazer: podemos digitar git add ou git commit -
a para resolver a questo.

O comando git commit -a mata dois coelhos com uma cajadada: acrescenta as
modificaes rea de stage e comita de uma s vez, porm, o jeito certo de usar esse
comando um pouco diferente. As trs linhas de comando abaixo so equivalentes. Fica a
seu gosto

$ git commit -a -m "mensagem do comite".

(a flag -a siginica "todos os arquivos" e -m significa que voc quer digitar uma mensagem
no comite).

$ git commit -am "mensagem do comite".

( uma abreviao da linha acima, juntando as duas flags)

$ git commit -all -m "mensagem do comite".

(um pouco mais verboso, mas exatamente a mesma coisa que as duas linhas acima).

Versionando nosso primeiro arquivo 32


workflow front end

Mas ateno: a flag -a, ou uma das variaes, s funciona se os arquivos alterados foram
versionados previamente (com o $ git add ou $ git add . ). Se voc nunca adicionou os
arquivos rea de stage, a flag -a no produzir resultado algum.

Versionando nosso primeiro arquivo 33


workflow front end

Avaliando o histrico
Se tudo correu bem, j temos algumas verses de nosso arquivo. Vamos verificar digitando
no terminal:
$ git log

Com esse comando, podemos ver o histrio de commits j efetuados. Poderamos tambm
ver uma verso resumida, passando mais uma flag --oneline
$ git log --oneline

Tambm poderamos ver somente os ltimos comites. Se nosso projeto j existisse h


bastante tempo, contendo vrios comites, o comando acima nos traria uma lista enorme.
Podemos passar mais uma flag, informando quantos comites queremos ver. At o momento
s temos dois comites em nosso repositrio, portanto, para ver isso funcionando, digite em
seu terminal:
$ git log -n 1

Esse comando nos traz apenas o ltimo commite. Se quisermos, por exemplo ver os
ltimos trs, basta digitar:
$ git log -n 3

E tambm d para unir as duas flags. Experimente:


$ git --oneline -n 1

Dica: Se voc tiver vrios comites, provavel que veja um sinal de dois-pontos na ltima
linha do terminal ao digitar $ git log . Esse sinal um indicativo que h mais linhas para
mostrar no output. Para v-las uma a uma, basta apertar o ENTER do teclado. Para sair
dessa visualizao, basta digitar a letra "q".

Fcil, no? Vimos o bsico sobre o Git. Daria pra falar muito mais sobre ele, como por
exemplo criar branchs, criar releases, fazer merge entre branchs, resolver possveis
conflitos entre arquivos. Mas vamos ter que parar por aqui. Espero que com essa base voc
possa continuar seus estudos sem se assustar com o terminal e podendo dar os primeiros
comandos do Git.

H vrias maneiras de comparar as modificaes de um arquivo usando o Git. A que mais


me agrada utilizar uma interface grfica para isso. Para abrir esse programa, digite no
terminal $ gitk . O Gitk um programa a parte especfico para visualizar as alteraes nos

Avaliando o histrico 34
workflow front end

arquivos. D uma fuada nele. bem tranquilo.

No prximo tpico vou falar um pouco sobre o GitHub. Vamos criar um repositrio na nuvem
e mandar nossos arquivos pra l, deixando nossos arquivos visveis para o mundo inteiro. O
cloud o limite.

Avaliando o histrico 35
workflow front end

Fundamentos do GitHub
Ainda me lembro como se voc ontem. Foi no final de 2012 que desenvolvi meu primeiro
plugin jQuery. O plugin era muito simples e resolvia um problema que frequentemente eu
enfrentava: igualava as alturas de vrios elementos flutuantes de acordo com a altura do
maior elemento na mesma linha. Hoje h formas de resolver este problema apenas com o
CSS, mas naquela poca, me facilitou muito a vida e resolvi compartilhar o meu feito com o
mundo inteiro.

E onde deveria "hospedar" o meu cdigo? J havia usado o GitHub para "baixar" javascripts
de terceiros, portanto, "subir" meu prprio cdigo no deveria ser difcil.

Depois de me cadastrar no site, procurei imediatamente um boto para upload, sem


sucesso. No havia (e no h um boto upload de arquivos no GitHub). Tudo bem, talvez
eu tenha sido o nico idiota que tenha procurado esse boto no GitHub, mas naquele
momento, a minha vida teria sido mais fcil se algum mais experiente tivesse me
explicado:

"O GitHub no um lugar para voc hospedar seus arquivos l. Ele um servio que
possibilita voc deixar o seu repositrio GIT na nuvem."

Assim no Git como no GitHub.


At o captulo passado, todo o versionamento ( git init , git add , git commit etc) era
efetuado na sua mquina. Isso resolve um problema: se algo der errado, fcil voltar uma
verso ou at mesmo comparar arquivos antes e depois de cada commit. Mas isso ainda
no resolve alguns problemas:

Se voc trabalhar em equipe, cada desenvolvedor ter a sua prpria verso. O que no
o ideal.
Mesmo trabalhando sozinho, o ideal que voc no mantenha o seu versionamento de
seu sistema somente na sua mquina. Assim, mesmo que a sua mquina pegue fogo,
voc poder continuar trabalhando de qualquer outro lugar.

O GitHub no a nica soluo para estes problemas. Voc poderia, por exemplo, manter
um repositrio central no seu servidor e fazer todos os colaboradores clonarem os projetos
de l. uma soluo vlida, contudo, pela facilidade, mostrarei aqui como manter seu
repositrio no GitHub. Entretanto, vale alertar que o GitHub gratuto para contas com
projetos pblicos. Se voc precisar de um projeto privado, precisar de uma conta paga.

Fundamentos do Github 36
workflow front end

Dito isto, o primeiro passo criar sua conta em https://github.com/join.

Preencha o formulrio com seus dados e depois escolha um dos planos. Pode criar uma
conta gratuita para testarmos.

Depois da conta criada, voc precisar criar um repositrio de teste. Do lado direito, procure
uma caixa "Your repositories" e clique no boto "upload". Brincadeira!. Clique em "new
repository". D um nome bonito para o seu repositrio e lembre-se de deix-lo como
pblico. As demais configuraes voc pode deixar como est. Clique em "create
repository".

Prontinho. Voc tem seu primeiro repositrio (ainda vazio) criado. Agora vamos fazer a
ligao entre o seu repositrio local e o remoto.

O primeiro passo configurar o repositrio corretamente usando o terminal.

Acesse a pasta do nosso exemplo digitando no Git Bash:


$ cd ~/Projects/PrimeirosPassosWorflow

Lembre-se que o "~" um atalho para a sua pasta pessoal.

Estando na pasta correta, digite o seguinte comando no seu terminal:


$ git remote add origin https://Seu_usuario/seu_repositorio.git

Repare que voc precisa trocar o seu usurio e o nome do seu repositrio no endereo
acima. Se voc no tiver certeza de ter escrito corretamente, procure na pgina inicial do
seu repositrio o lado direito onde est escrito: HTTPS clone URL

essa URL que voc precisa escrever no seu terminal (comando $ git remote )

Com o comando anterior, voc criou um vnculo do nome "origin" para o seu repositrio que
est l no GitHub.

Git Push e Pull


Uma vez criado o nosso apontamento do "origin" para o GitHub, o prximo passo "subir"
seus arquivos para a nuvem. Tendo certeza que voc est na pasta correta, digite no
terminal:

$ git push origin master

Na verdade, ns no estamos "subindo" nossos arquivos. Ns estamos enviando todo o


histrico do versionamento. Explicando o comando acima: push o comando que submete
o versionamento para o seu repositrio na nuvem. origin o seu repositrio remoto que,

Fundamentos do Github 37
workflow front end

como dito antes, aponta l para o GitHub. master a sua branch principal. No cabe aqui
explicar em detalhes o que uma branch, mas saiba que o nome "master" um nome
padro criado pelo prprio Git. Recomendo deixar esse nome por enquanto.

Digite seu usurio e senha do GitHub e tecle ENTER. Se tudo correu bem, voc j
consegue ser sua verso na internet. https://github.com/Seu_usuario/seu_repositorio

Digamos agora que a sua mquina subiu no telhado e voc precisa continuar o
desenvolvimento da sua pgina exemplo01.html. Se voc fez tudo certinho ( git commit e
git push nos momentos adequados) basta voc "baixar" seus arquivos de outra mquina

(pode at ser emprestada) que contenha o Git instalado.

Para isso, crie uma pasta nesse novo computador que ser o seu repositrio local de todos
os projetos (similar nossa pasta "Projects") e a acesse no terminal com o comando cd .
Depois, digite:
$ git clone https://Seu_usuario/seu_repositorio.git

Esse comando far uma cpia dos arquivos que esto no seu repositrio l no GitHub num
diretorio com o mesmo nome de seu repositrio (veja com o comando ls ). Agora no tem
mais desculpa. Pode continuar o desenvolvimento do projeto. Quando tudo tiver feito (ou no
final do dia de trabalho), faa um commit e suba tudo novamente no GitHub ( $ git push
origin master ). Assim voc garante que no haver problema de perda de arquivos (e

horas de trabalho) se a sua nova mquina resolver subir no teclado tambm.

Maravilha. Voc continuou o trabalho usando uma mquina emprestada sem prejuzo
algum. Mas a sua outra mquina foi para o concerto e ficou pronta. Tudo funcionando
perfeitamente. Ento voc agradece e devolve a mquina emprestada e volta para a sua
prpria mquina. Como continuar com o desenvolvimento? Ser preciso clonar novamente
o repositrio? No. Se este ainda estiver configurado no computador, basta solicitar ao Git
para atualizar os arquivos locais de acordo com o ltimo commit que foi feito no GitHub.
Para isso, digite no terminal (depois de acessar a sua pasta com o comando cd ).

$ git pull origin master .

Prontinho, no s os arquivos na sua mquina esto todos atualizados como voc ainda
mantm todo o histrico. Faa um teste digitando $ git log .

Por hora isso. Ainda h muito o que aprender sobre o Git mas o que eu apresentei aqui
o bsico necessrio para voc continuar seus estudos.

Atualmente, saber manusear bem os comandos do Git (ou outro sistema de controle de
verso) requisito obrigatrio em qualquer rea de desenvolvimento (web, app, mobile,
front-end, back-end etc).

Fundamentos do Github 38
workflow front end

Se voc no conhecia nada sobre o assunto, eu espero que tenha conseguido te dar uma
luz. Se j conhecia, espero que tenha acrescentado algo novo.

No prximo captulo vou mudar um pouco de assunto e falar sobre npm e automatizao de
tarefas. Espero que continue a leituira. At l!

Fundamentos do Github 39
workflow front end

Turbinando o NodeJS
Se voc acompanhou a leitura desde o princpio, voc est apto a dar continuidade nos
estudos e entender melhor o que o NodeJS e o npm. Para isso, vamos resumir o que
aprendemos at esse ponto:

J temos instalado o NodeJS em nossa mquina, por conseguinte, ganhamos de


presente o npm, que o gerenciador de pacotes do node.
Tambm vimos alguns comandos bsicos do Unix e at testamos estes comandos no
Git Bash, que um programa do tipo terminal que simula comandos Unix no Windows.
Instalamos o Git na nossa mquina, que um software de versionamento, responsvel
por armazenar o histrico de desenvolvimento do nosso site/aplicativo. At j criamos
alguns commits usando o terminal.
Criamos um repositrio no github e efetuamos alguns pushs para l.

Nas prximas sees, vamos avanar com nossos estudos instalando novos mdulos no
NodeJS, ganhando assim novos comandos na linha de comando.

Turbinando o NodeJS 40
workflow front end

Pensando fora do Browser


O NodeJS um programa escrito em C++ e baseado na engine V8 cuja principal funo
poder ler e interpretar cdigos javascripts fora do browser.

A princpio, o NodeJS foi pensado para poder criar servidores web baseados em eventos
javascripts. E isso ainda perfeitamente possvel. Mas o fato que voc pode instalar e
utilizar o node sem nunca necessariamente criar ou rodar um servidor baseado nele. Um
exemplo: h um mdulo do nodejs chamado uglify. (Um mdulo um arquivo javascript que
voc instala atravs do npm. Veremos isso detalhadamente em instantes). Uma vez
instalado o uglify, voc ganha de presente um novo comando no seu terminal. Esse
comando faz com que o NodeJS seja capaz de ler um arquivo js e minific-lo,
automaticamente. Lindo n?

Uma coisa que devemos ter em mente que um mdulo do node pode ser instalado
globalmente (no sistema, podendo ser usado em qualquer projeto) ou localmente (apenas
no projeto atual).

Instalando mdulos no NodeJS


Assim que instalamos o node j temos o nosso primeiro mdulo disponvel para uso, que
o prprio node package management, ou seja, ganhamos um comando novo no terminal:
npm . H uma flag que mostra um texto de ajuda sobre determinado comando: -h . Ento,

digite no seu terminal: $ npm install -h

Esse comando ir mostrar o texto de ajuda do comando install.

Sempre que voc tiver dvida sobre algum comando, habitue-se a sempre ver o texto de
ajuda antes de procurar no stackoverflow. uma excelente maneira de evoluir seus
conhecimentos sobre determinada ferramenta.

Voltando: repare que no comeo da ajuda h a seguinte linha: npm install <pkg> , onde
<pkg> o pacote a ser instalado.

Queremos instalar em nosso sistema o uglify, portanto, digite no terminal: $ npm install
uglify-js -g

a flag -g informa que voc est instalando o pacote globalmente no seu sistema.

Pensando fora do Browser 41


workflow front end

Voc deve estar ser perguntando de onde o npm baixou os arquivos necessrios para a
instalao. A resposta: https://www.npmjs.com/package/uglify-js. O site npmjs.com um
repositrio de pacotes desenvolvidos pela comunidade prontos para uso. Se o pacote
estiver neste repositrio, basta digitar seu nome logo aps o comando install que o npm
j sabe o que fazer.

Se a instalao ocorreu com sucesso, voc dever ver no terminal, o local onde o mdulo
foi instalado (lembre-se que o instalamos globalmente no sistema com a flag -g ) e as
dependncias necessrias para este mdulo funcionar.

Agora que temos um comando novo na linha de comando, vamos experimentar o seguinte
comando: $ uglifyjs -h

Eu confesso que a ajuda do uglify um pouco extensa, mas no se preocupe, por hora,
vamos simplesmente ver o uglify em ao.

A ideia minificarmos o nosso arquivo app.js. Mas para isso, vamos edit-lo um pouco,
como a seguir:

var body = document.body;


var cor = 'red';

var mudaCor = function(alvo, cor){


alvo.style.color = cor;
}

mudaCor(body, cor);

Tudo deve continuar funcionando, entretanto, vamos minificar esse arquivo. Para isso,
tenha certeza de que est na pasta PrimeirosPassosWorflow e digite no terminal:

$ uglifyjs js/app.js --output js/app.min.js

Se tudo correu bem, um novo arquivo foi criado. O NodeJS leu o se arquivo app.js e deu
sada ( --output ) em outro arquivo, mas desta vez minificado. Abra-o no seu editor e veja o
que aconteceu. Podemos ver que a minificao no foi l essas coisas. Vamos corrigir isso.
Digite no seu terminal:

$ uglifyjs js/app.js --output js/app.min.js --mangle

A flag --mangle ir analizar o seu arquivo e ir substituir, onde possvel, alguns nomes de
variveis para deixar o arquivo mais enxuto, reduzindo assim alguns kbytes de transferncia
de dados.

Pensando fora do Browser 42


workflow front end

Se voc olhar o arquivo minificado, ver que os nomes dos parmetros da funo mudaCor
foram alterados para um caracter apenas. Bem melhor, no? H outras opes disponveis
no uglify. E h tambm uma infinidade de outros pacotes disponveis no npmjs.org. Mas o
mais importante aqui perceber que usamos o NodeJS e o npm para instalar um pacote
globalmente e utilizamos esse pacote sem necessariamente termos configurado um
servidor.

Precisamos entender agora a diferena entre instalar um pacote global (com a flag -g ) e
um pacote local em nosso projeto.

Pensando fora do Browser 43


workflow front end

Maneiras de instalar pacotes do npm


Sabemos que para instalar um novo pacote atravs do npm, devemos digitar em nosso
terminal o seguinte comando:

$ npm instal <package> , para instalaes locais em cada diretrio do projeto

ou:

$ npm instal <package> -g , para instalaes globais no sistema.

Contudo, falta-nos entender, de fato, quais as principais diferenas entre essas duas
abordagens:

A vantagem mais obvia de uma instalao global com relao utilizao do espao
fsico na sua HD. Os pacotes instalados globalmente precisam ser instalados apenas uma
vez e podem ser utilizados em quantos projetos forem necessrios. Se voc usa com
frequncia um determinado mdulo do NodeJS, vale a pena pensar em instal-lo
globalmente. A prposito, o caminho fsico dessa instalao em seu sistema Windows :
C:\Users\\AppData\Roaming\npm\node_modules

Se voc instalar um mdulo localmente na sua pasta do projeto os arquivos e todas as suas
dependncias ficaro dentro de um diretrio chamado "node_modules" pentencente ao
projeto. Os mdulos do npm so conhecidos por serem, algumas vezes, um tanto pesados.
Portanto, o espao fsico disponvel na sua HD deve ser levado em considerao.

Dito isto, voc deve estar se perguntando por qual motivo algum deveria instalar um
mdulo localmente no diretrio do projeto. Eu creio que este no seja o momento de
explicar isso, mas eu quero que voc tome nota do paragrfo abaixo e leia-o no futuro (eu
anotaria no evernote):

Se voc quiser usar o mdulo no seu projeto, atravs do terminal (linha de comando, ou
CLI, como preferir), voc poder instalar um mdulo globalmente. Entretanto, se voc
estiver desenvolvendo um mdulo para servir de dependncia de outro mdulo - usando
require("seu_modulo") -, voc ter que instal-lo localmente, na raiz do seu projeto.

Na prtica, eu instalo os mdulos que utilizo com mais frequncia globalmente. Contudo,
instalo os mdulos usados em projetos especficos apenas localmente. Estes pacotes sero
descartados da minha mquina quando o projeto estiver entregue em produo, liberando

Instalando packages local ou globalmente 44


workflow front end

espao fsico da minha HD. No h problema algum em apagar um mdulo, desde que
voc consiga nova instalao rapidamente, sem esforo algum, caso necessrio na
manuteno do projeto. E isso tema do prximo tpico.

Instalando packages local ou globalmente 45


workflow front end

Package.json
Ora, h uma srie de mdulos prontos para serem utilizados em https://www.npmjs.com/.
Tem mdulo para tudo que voc imaginar. Mas voc no pode sair instalando tudo
globalmente no seu sistema como se no houvesse o amanh. Voc ir primeiramente
trabalhar com esse mdulo localmente, e alm disso, como dito no tpico anterior, voc
pode querer trabalhar com este mdulo apenas num projeto especfico e depois exclu-lo da
sua mquina. Ou seja, para que voc no tenha problemas em manutenes futuras, voc
dever anotar os mdulos utilizados em algum lugar, para que no futuro voc mesmo ou
qualquer outra pessoa possa instalar corretamente todos estes mdulos e continuar
trabalhando no projeto. Talvez voc tenha pensado num LEIAME.txt, mas no, no faa
isso. Uma melhor maneira de resolver esse problema criar um arquivo chamado
package.json contendo, entre outras coisas, os mdulos necessrios para que o projeto
continue funcionando. Alm de informar o nome do mdulo voc tambm pode incluir
informao sobre a verso utilizada, o que pode ser muito til no futuro.

Os projetos baseados em NodeJS usam um arquivo de configurao (manifest) chamado


package.json

Um outro cenrio quando trabalhamos em equipe. Se eu estou desenvolvendo um projeto


node, posso versionar o arquivo de configurao package.json, ignorando toda a pasta
node_modules (que, como vimos, so os mdulos instalados localmente). Se uma pessoa
do meu time precisar desenvolver uma funcionalidade nova ou continuar o meu trabalho,
ele dever puxar do Git/GitHub ( $ pull origin , lembra?) somente o package.json, no se
importando com os mdulos que instalei localmente. Pois estes mdulos sero instalados
automaticamente na sua mquina com apenas um comando na linha de comando:
$ npm install

Esse comando ir ler o arquivo package.json e instalar todas as dependncias locais do


projeto. Isso no lindo?

Esse arquivo possui a seguinte aparncia:

Package.json 46
workflow front end

{
"name": "PrimeirosPassos",
"version": "0.0.1",
"description": "Uma descrio do seu projeto",
"main": "main.js",
"repository": {
"type": "git",
"url": "http://github.com/tapmorales/meu_repositorio"
},
"keywords": [
"array", "palavras chaves"
],
"author" : {
"name" : "Daniel Tapias Morales",
"email" : "daniel@email",
"url" : "http://www.meudominio.com/"
},
"homepage": "http://www.meu-projeto.org"
"license": "ISC",
"private" : true,
"dependencies" : {
"nome_do_modulo" : "x.x.x"
}
}

Acredito que a maior parte desse arquivo seja autoexplicativo, portanto, no entrarei em
maiores detalhes.

O que merece maior ateno com relao ltima propriedade chamada "dependencies",
que um objeto cuja a chave o nome do mdulo dependncia e o valor a verso
utilizada em sem projeto. Ao digitar em seu terminal $ npm install esse objeto ser lido
pelo npm e todos os mdulos listados sero instalados automaticamente. Eu j falei que
isso lindo?

Mas aqui eu preciso chamar a sua ateno para um detalhe importante. Os projetos
instalados globalmente no so listados como dependncia. Essa uma grande
desvantagem da instalao global. Dito isso, vamos criar o nosso arquivo package.json.

Mas como criar esse arquivo? na unha?


No precisa ser. H um comando do npm que te ajuda a criar esse arquivo por meio de um
assistente maroto. Tudo o que voc precisa fazer responder algumas perguntas e o
arquivo de configurao ser criado. Para abrir este assistente, digite no seu terminal:

$ npm init

Package.json 47
workflow front end

Feito isso, a primeira informao que voc precisar fornecer o nome do seu projeto. V
digitando e confirmando com o ENTER. Quando voc no tiver certeza, pode apertar o
ENTER mesmo sem preencher nada. H qualquer momento, CTRL + C para sair do
assistente.

No final, voc ver como o seu arquivo json ser criado. Aperte Enter para confirmar.

A partir de agora, sempre que voc quiser instalar um novo mdulo para utilizar em seu
projeto e quiser mencion-lo como dependencia no arquivo package.json, basta voc
passar uma flag no momento da instalao: --save .

A flag --save acrescenta uma nova configurao no package.json, informando qual o


mdulo e verso est sendo utilizado no projeto.

Mas antes de entrar em maiores detalhes, quero explicar para voc que h dois tipos de
dependncias: as de produo e as de desenvolvimento.

Mas isso assunto para a prxima seo.

Package.json 48
workflow front end

Dependncias de produo vs. de


desenvolvimento
H dois tipos de dependncias em projetos NodeJS. Vamos estud-las.

Dependncias de produo
So aquelas dependncias que precisam estar em produo para que seu projeto funcione.
Por exemplo: jquery, angular, bootstrap etc. Se voc deseja instalar um mdulo de
produo, basta digitar em seu terminal:
$ npm install <pacote> --save

Espero que voc entenda porque no faz sentido digitar o seguinte:


$ npm install <pacote> -g --save

Dependencias de desenvolvimento
So as dependencias que no precisam ser levadas para produo. Estes mdulos so
usados apenas em ambiente de desenvolvimento. Alguns exemplos so os mdulos que
voc instala para minificar, concatenar arquivos e at mesmo rodar alguns pr-
processadores de css.

Para incluir no package.json uma depdendencia de desenvolvimento, basta digitar a flag --


save-dev, como no exemplo:
$ npm install <pacote> --save-dev

Trs informaes importantes:

1. Na prtica, os comandos acima criam duas novas propriedades no arquivo


package.json, cada uma contendo um objeto, so elas: dependencies e
devDependencies, usadas para listar as dependencias de produo e de
desenvolvimento, respectivamente.

2. Alguns devs gostam de diferenciar o gerenciador de pacotes de produo e


desenvolvimento. Eles utilizam um gerenciador de dependencias exclusivo para o
ambiente de produo chamado bower. Eu acho isso uma boa prtica. Mas como no

Dependncias de produo vs. de desenvolvimento 49


workflow front end

vou incluir nenhum arquivo voltado para o front-end, no vou me preocupar com as
dependencias de produo. Contudo, tenha em mente que projetos na vida real utilizar
o bower pode ser uma boa estratgia.

3. Se voc instalou todas as dependncias de seu projeto usando a flag --save, estas
esto listadas no seu arquivo package.json. Isso significa que voc no precisa
versionar seu diretrio node_modules, o que uma boa prtica. Se voc ou outra
pessoa precisar rodar seu projeto em outra mquina, basta digitar no terminal $ npm
install que todas as dependncias sero instaladas de uma nica vez. possvel

dizer ao Git que voc no quer versionar seu diretrio de mdulos criando um arquivo
.gitignore contendo simplesmente o nome da pasta "node_modules/". Lembre-se de
incluir esse arquivo .gitignore no versionamento com o $ git add .gitignore ou $ git
add .

Pois bem. At o momento aprendemos a diferenciar os pacotes de


desenvolvimento/produo e instalaes globais/locais. A sua lio de casa dar uma
olhada no bower. Voc ver que com o contedo que aprendeu at aqui, ser capaz de
instalar e utilizar essa ferramenta para gerenciar suas dependncias de produo.

Ateno: Spoiler frente


Se voc chegou at aqui e deu uma olhada no bower, voc deve ter percebido que ao
instalar uma dependncia de produo a mesma fica armazenada numa pasta chamada
bower_components.

Como bower um gerenciador de pacotes especficos para front-end, voc encontrar


frameworks para ser entregues em produo, como por exemplo:

Bootstrap
jQuery
jQuery UI
Underscore
AngularJS
Backbone
Modernizr
Normalize.css
Font Awesome

Estes so s alguns exemplos. Voc pode ver os pacotes disponveis na ferramenta


clicando aqui.

Dependncias de produo vs. de desenvolvimento 50


workflow front end

De certa maneira, esse processo agiliza muito o processo de iniciar um projeto novo. Voc
no precisa mais baixar todas as bibliotecas que precisar num diretrio no seu projeto e
depois vincul-los um a um.

Voc pode listar todas as dependncias do front-end num arquivo chamado bower.json e
depois baix-las todas de uma nica vez usando o comando $ bower install .

Fim do Spolier

Dependncias de produo vs. de desenvolvimento 51


workflow front end

Automatizao de tarefas
Se voc chegou at aqui, meus parabns! At esse ponto, voc j deve ter conhecimento
para:

Criar um repositrio no Git e no GitHub contendo os arquivos de seu projeto


versionados.
Utilizar o terminal e o npm para instalar pacotes do NodeJS para facilitar o
desenvolvimento de seu site/aplicao.
Usar o npm para criar o package.json e listar, nesse mesmo arquivo, as dependncias
do seu projeto no momento da instalao.

Ns vimos o bsico do NodeJS e do npm instalando o pacote uglify-js. Quando fizemos


isso, ganhamos de presente um comando novo de linha de comando que podemos usar
para minificar nossos arquivos javascript. Por favor, nunca mais entregue em produo seus
arquivos javascripts de desenvolvimento.

Alm do uglify, h uma srie de outros pacotes super teis no desenvolvimento front-end.
Listarei alguns:

Autoprefixer. Com este mdulo instalado voc escreve seus arquivos css sem se
preocupar com os prefixos dos vendors (-webkit, -moz, -o, -ms). Ou seja, voc escreve
seu CSS normalmente e o autoprefixer escreve os prefixos pra voc.
Clean CSS. um minificador para arquivos css.
Usemin. Procura no arquivo html as chamadas para arquivos externos (javascript e
css) e as substitui por uma nica chamada a um arquivo concatenado.
Imagemin. Responsvel por minificar suas imagens.

H uma srie de outros mdulos teis disponveis no https://www.npmjs.com. Mas o fato


que, mesmo sendo uma mo na roda, executar estes comandos, um a um no terminal, no
me parece uma boa prtica. Imagine que toda vez que voc efetuar uma alterao no seu
arquivo fonte (arquivo de edio), voc tenha que executar uma srie de comandos no
terminal. Um comando para concatenar os seus javascritps num arquivo s. Outro comando
para minific-lo. Outro ainda para minificar as suas imagens e outro para substituir as
chamadas aos seus arquivos externos no seu html. No seria produtivo e esse workflow
seria abandonado muito rapidamente. E a que entram os automatizadores de tarefas.

H dois principais automatizadores de tarefas, o Grunt e o Gulp. Vou focar somente no


primeiro pois, quando eu comecei meus estudos, tinha muito mais plugins disponveis para
a instalao.

Automatizao de tarefas 52
workflow front end

O Grunt funciona da seguinte forma: voc escreve uma lista de tarefas e atribui essa lista
um nome, por exemplo, 'deploy'. Toda vez que voc chamar no terminal esse 'deploy', uma
srie de comandos ser executada, ou seja, voc poder, de uma nica vez, executar as
seguintes tarefas:

1. Autoprefixar os seus arquivos CSS.


2. Minificar o seu arquivo CSS autoprefixado.
3. Concatenar todos os seus arquivos javascripts num arquivo s.
4. Minificar esse arquivo, removendo quebras de linha, reduzindo nomes de variveis e
removendo os comentrios.
5. Copiar alguns arquivos estticos (como arquivos de vendors e imagens) para a sua
pasta de deploy (que no a mesma pasta de desenvolvimento).
6. Atualizar as chamadas nos arquivos htmls aos arquivos externos.

Existem outras possibilidades ao trabalharmos com o Grunt, mas por hora, vamos focar no
workflow descrito acima.

Te vejo no prximo tpico

Automatizao de tarefas 53
workflow front end

Criando a estrutura de diretrios


A partir desse momento vamos trabalhar com uma estrutura de diretrios um pouco
diferente de como estvamos trabalhando at o tpico anterior. A ideia termos uma
estrutura que lembre um pouco um projeto real. Para isso, vou pedir que voc execute
algumas tarefas:

Crie um novo diretrio chamado "projetoWorkflow" no seu diretrio home. (fora da


pasta que estvamos trabalhando, a "PrimeirosPassosWorkflow".
Nesse diretrio recm-criado, acrescente mais dois diretrios: "source" e "deploy". Os
arquivos de "source" sero os arquivos fontes (arquivos de edio). Os arquivos que
estivem em "deploy" sero os arquivos que iro para produo. Estes arquivos sero
gerados pelo nosso GruntJS.
Dentro da pasta "source" crie mais trs diretrios, a saber: "javascript", "sass" e
"vendor". Crie tambm um index.html com a estrutura inicial de qualquer arquivo html.
Na raiz do projeto, crie um arquivo chamado .gitignore (mantenha o ponto inicial no
nome do arquivo).
Crie um aquivo package.json atravs de um comando no npm. Lembra qual o
comando? $ npm init . Responda as perguntas feitas pelo assistente e v dando
ENTER.
Transforme o diretrio raiz (PrimeirosPassosWorkflow) num repositrio Git. Lembra-se
do comando que faz isso? No poderei contar que o $ git init ;)
Crie um novo repositrio na sua conta do GitHub e mande tudo para l. Se voc no se
lembra como faz isso, uma boa hora para revisar Fundamentos do GitHub. Essa
etapa no obrigatria, mas um bom momento para revisarmos.

No final das etapas descritas acima, voc ter a seguinte estrutura:

projetoWorkflow
|-> .git
|-> deploy
|-> source
|-> javascript
|-> vendor
|-> sass
|- index.html
|- .gitignore
|- package.json

Criando a estrutura de diretrios 54


workflow front end

Faa uma pequena edio no seu arquivo package.json para ficar semelhante :

{
"name": "projetoWorkflow",
"version": "1.0.0",
"description": "Exemplo de um projeto",
"author": "Daniel Tapias Morales"
}

Explicao sobre o processo de build


O build, ou deploy, nada mais do que preparar os arquivos para serem enviados para
produo (subir no servidor e torn-lo disponvel na internet). Esse processo pode envolver
uma srie de tarefas, e pode variar de projeto para projeto. Os exemplos mais comuns e
simples de entender so:

autoprefixer nos arquivos css, ou seja, incluir os prefixos dos browsers, quando
necessrio.
concatenar arquivos javascript.
minificar arquivos, aumentando a performance do site/aplicao.
Copiar arquivos estticos (como midias ou fontes) no diretrio de deploy.

H muitos outros processos legais que poderamos ver nesse guia, mas focarei no mais
fundamental para seu entendimento.

Dito isto, quero detalhar alguns pontos sobre a estrutura de diretrios criada acima:

O arquivo package.json, como sabemos, onde listamos as nossas dependncias do


projeto.
O arquivo .gitignore usado para dizer ao Git quais arquivos no devem ser
versionados.
No deveremos mexer dentro da pasta "deploy". Os arquivos desta pasta sero criados
pelo nosso builder, no nosso caso, ser o GruntJS.
A pasta source/javascript ter mais de um arquivo .js. Porm, esses arquivos sero
concatenados num nico arquivo e minificados no momento do build.
Por enquanto, a pasta source/sass conter um arquivo css simples. Este arquivo ser
autoprefixado apenas. Nos prximos tpicos faremos as alteraes necessrias para
podermos trabalhar com o pre-processador SASS.
A pasta source/vendor conter, para exemplificar, um arquivo de terceiro, o modernizr.
Se este arquivo estiver minificado (normalmente est) ele simplesmente ser copiado
para o devido lugar dentro de "deploy". Esse mesmo processo poderia ser criado para

Criando a estrutura de diretrios 55


workflow front end

uma pasta "images", por exemplo. No criarei imagens em nosso projeto para manter
as coisas simples.
Antes de cada build, iremos apagar (automaticamente, claro) todos os arquivos que
estiverem dentro de "deploy". Esse processo importante para evitarmos "sujeiras" de
builds anteriores.

J temos o entendimento necessrio para instalarmos o GruntJS, mas isso assunto para
o prximo tpico.

Criando a estrutura de diretrios 56


workflow front end

Instalando o Grunt JS
Para que o Grunt funcione adequadamente, precisamos primeiramente instalar a sua
interface CLI (command line interface). Dessa forma, voc consegue rodar os comandos do
grunt via terminal. Para isso, digite o comando abaixo

$ npm install -g grunt-cli

Em seguida, precisamos instalar o Grunt e inclu-lo na nossa lista de dependncia de


desenvolvimento no arquivo package.json. Para isso, tenha certeza que voc est
visualizando o diretrio projetoWorkflow no seu terminal e digite:
$ npm install grunt --save-dev

Feito isso, dever acontecer duas coisas: A primeira que foi criado um diretrio chamado
node_modules contendo o grunt. A segunda que foi acrescentado no seu package.json as
seguintes linhas:

"devDependencies": {
"grunt": "^0.4.5"
}

Instalando plugins do Grunt


O Grunt sozinho no faz nada sem os plugins (mentira, faz sim, mas por enquanto, aceite
isso como uma verdade). Ou seja, precisamos instalar os plugins para rodar determinadas
tarefas que voc precisar. H plugin pronto para quase tudo, e voc poder checar o site
http://gruntjs.com/plugins para pesquisar coisas novas.

Num dos tpicos passado, instalamos o uglify para minificar nosso js, lembra? Apenas para
recordar, segue o comando para instalar o uglify:

$ npm install uglify-js

Contudo, ao trabalharmos com Grunt, no precisamos instalar o pacote acima para minificar
nossos arquivos. Em contrapartida, precisamos instalar um wrapper do prprio Grunt que
envolve o pacote uglify e assim possibilita que executemos o comando uglify no mais pela
linha de comando, mas sim programaticamente. isso mesmo. Ns iremos escrever

Instalando o GruntJS 57
workflow front end

cdigos javascript que rode comandos que antes s rodavam no terminal. Ou seja, vamos
criar um arquivo javascript que contenha, por exemplo, uma chamada para uglify. Mas eu
no estou falando de qualquer arquivo. Eu estou falando do Gruntfile.js.

arquivo Gruntfile.js
Temos quase tudo de que precisamos. Resta agora criarmos, na raiz do nosso projeto, um
arquivo chamado Gruntfile.js (mantenha a primeira letra maiscula). Esse arquivo conter
as definies das tarefas que voc criar. a partir desse arquivo que o Grunt saber quais
tarefas executar.

Mas antes de continuarmos, eu preciso que voc instale todos os plugins necessrios para
executar as tarefas mencionadas anteriormente. Para isso, voc ir digitar no terminal as
seguintes linhas:

$ npm install grunt-autoprefixer --save-dev


$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-uglify --save-dev
$ npm install grunt-contrib-copy --save-dev
$ npm install grunt-contrib-clean --save-dev

Da mesma forma que os pacotes instalados diretamente pelo terminal, os plugins do Grunt
so copiados para dentro de node_modules. Dependendo do numero de plugins instalados,
o diretrio node_modules fica com um peso considervel. Por isso, acho uma boar prtica
no inclu-lo no versionamento. Lembre-se que o .gitignore est a para isso.

At aqui j temos o GruntJS alguns plugins intalados em nosso projeto. Vamos aprender no
prximo tpico como configurar no Gruntfile.js.

Instalando o GruntJS 58
workflow front end

Registrando tarefas no Gruntfile.js


Depois que tivermos todos os plugins instalados, precisamos registr-los (carreg-los) no
nosso Gruntfile. Para isso, abra esse arquivo no seu editor de cdigo e insira o trecho a
seguir:

module.exports = function(grunt) {

grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
}

Isso faz com que os plugins instalados anteriormente estejam disponveis para serem
usados via Gruntfile.js, e no mais via terminal.

O prximo passo configurar cada um dos plugins. Cada um deles possui sua maneira
peculiar de configurao. Eu farei aqui somente o bsico, mas no final, voc poder ler
diretamente a documentao de cada um dos plugins para se aprofundar.

Toda a configurao precisa estar inserida num mtodo do Grunt. Veja o cdigo:

grunt.initConfig({

});

Esse objeto que passado por parmetro para a funo initConfig conter as opes de
cada um dos plugins.

Registrando tarefas 59
workflow front end

grunt.initConfig({
autoprefixer: {

},

copy: {

},

clean: {

},

cssmin: {

},

uglify: {

},

});

Por hora, essa a aparncia de nosso arquivo.

Registrando tarefas 60
workflow front end

Para comearmos os nossos testes efetivamente, precisamos criar os nossos arquivos css,
javascript e html. Mas para isso, voc ter que clicar no link do prximo tpico.

Registrando tarefas 61
workflow front end

Criando os arquivos estticos


Esse tpico no apresentar nada de novo. Vamos criar os arquivo necessrios para rodar
as tarefas do Grunt. Ento, simplesmente crie os seus arquivos no diretrio source. No se
esquea que precisaremos de um arquivo modernizr.

Eu quis criar dois arquivos javascripts pra vermos como a concatenao deles funciona. Eu
at que me esforcei para pensar em alguma funcionalidade que fosse simples, mas que no
fosse banal. Depois de alguns minutos, desisti. Resolvi criar duas funcionalidades idiotas
banais mesmo. Para os propsitos deste guia, satisfaz.

Os arquivos javascripts esto divididos em mdulos. Um mostra a data de hoje na tela


(UAU!) e o outro mostra na tela quantas vezes o usurio clicou num boto (WOOWW).

O CSS foi criado com alguns detalhes de gradiente para vermos o autoprefixer em ao.

O meu HTML e CSS segue a metodologia BEM (Block, element, modifier) para estruturar
minhas classes. Existem vrias outras metodologias j criadas e discutidas. E voc pode
usar alguma delas, alter-la ao seu modo ou simplesmente criar a sua prpria metodologia.
A ideia criar um padro, uma maneira de escrever cdigos CSS que sejam reutilizveis,
escalveis e elegantes. No entrarei em detalhes sobre o BEM, mas garanto que bem
simples e que h vrios materiais na internet para voc consultar.

Se voc um profundo conhecedor de BEM, voc perceber uma pequena falha nos meus
CSSs. No se preocupe com isso pois no momento oportuno eu retomarei esse assunto
para corrigirmos isso. Saiba que esse erro proposital e tem finalidades didticas

Alm disso, h mais uma coisa que preciso dizer: se voc fizer o seu CSS exatamente igual
ao meu, voc ver que eu no me preocupei com o design da pgina. (Mentira. A verdade
que no sou um bom designer, e por isso sempre escolho tons de cinza. mais difcil de
errar).

Agora sim, segue a estrutura final e os cdigos abaixo

index.html

Criando os arquivos estticos 62


workflow front end

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Exemplo de Task Runner</title>
<script src="vendor/modernizr.min.js"></script>
<link rel="stylesheet" href="sass/main.css">
</head>
<body>
<header class="mainHeader">
<h1 class="mainHeader__title">Exemplo de utilizao do GruntJS</h1>
</header>

<main role="main">

<div class="dateContainer">
<p class="dateContainer__content" id="containerDate"></p>
</div>

<div class="buttonsContainer">
<button id="incrementButton" class="buttonsContainer__button">Clica para incrementar
<div id="resultIncrementButton" class="buttonsContainer__result">Clicado
</div>

</main>

<script src="javascript/date.js"></script>
<script src="javascript/incrementButton.js"></script>
</body>
</html>

sass/main.css

Criando os arquivos estticos 63


workflow front end

body{
background: #ccc;
font-family: arial, sans-serif;
}

.mainHeader{
color: #bbb;
text-shadow: 2px 2px 1px rgba(0,0,0,.6);
}

.buttonsContainer{
border-top: 2px solid #A5A5A5;
}

.buttonsContainer .buttonsContainer__button{
background-image: linear-gradient(to top, #848484, #AFAFAF);
border: none;
padding: 1em;
margin: 1em 0;
cursor: pointer;
outline: none;
}

.buttonsContainer .buttonsContainer__button:hover{
background-image: linear-gradient(to top, #AFAFAF, #848484);
}
.buttonsContainer .buttonsContainer__button:active{
background-image: linear-gradient(to top, #868686, #565656);
}

.buttonsContainer .buttonsContainer__result--number{
font-weight: bold;
}

javascript/date.css

Criando os arquivos estticos 64


workflow front end

/*
Mostra a data na tela
*/

;(function(){
'use strict';
var dateContainer = document.getElementById('containerDate');

/* recupera a data e retorna na variavel dateInfo */


var dateInfo = (function(){
var today = new Date()
, date = today.getDate() + '/' + today.getMonth() + 1 + '/' + today.getFullYear();

console.log('a data que ir retornar : '+ date);

return date;
})();

// mostra a data na tela

dateContainer.appendChild(document.createTextNode(dateInfo));
})();

javascript/incrementButton.css

Criando os arquivos estticos 65


workflow front end

/*
Conta quantos cliques no boto
*/

;(function(){
'use strict';
var botao = document.getElementById('incrementButton')
, container = document.querySelector('.buttonsContainer__result .js-result')
, count = 0;

var showQuant = function(n){


console.log('showQuant chamado recebendo: ' + n);
// mostra a quantidade na tela
container.firstChild.nodeValue = n;
}

showQuant(count);

botao.addEventListener('click', function(e){
showQuant(++count);
})
})();

Segue o link para download do modernizr: http://modernizr.com/download/?-eventlistener-


queryselector-rgba-textshadow-setclasses

Segue a estrutura de arquivos do meu projeto para sua referncia.

Criando os arquivos estticos 66


workflow front end

No prximo tpico, vamos iniciar a configurao de nosso gruntfile para executar as tarefas
que havamos planejado.

Te vejo no futuro!

Criando os arquivos estticos 67


workflow front end

Executando Tarefas

Autoprefixer
A nossa primeira tarefa ser incluir, automaticamente, os vendors prefixers no nosso
arquivo css. Vale saber que este plugin utiliza as informaes disponveis no caniuse para
decidir qual vendor incluir no arquivo css. Para isso, o autoprefixer se baseia sempre nas
duas ltimas verses de cada browser (mas isso configurvel).

Abra o seu Gruntfile no editor de cdigo e substitua:

autoprefixer: {

},

por:

autoprefixer: {
dist: {
files: {
'deploy/css/main.css': 'source/sass/main.css',
},
},
},

A configurao desse arquivo to simples que acredito ser auto-explicativo.

Voc pode verificar outras opes de configuraes na prpria pgina do plugin.


https://www.npmjs.com/package/grunt-autoprefixer

Voc pode testar se o autoprefixer est funcionando digitando no terminal:

$ grunt autoprefixer

Voc dever ver uma mensagem "Done, without errors", indicando que correu tudo bem.

Abra o seu css gerado na pasta de deploy e veja os prefixos do linear gradiente. Veja que
eu os escrevi como manda a especificao (to top) e o autoprefixer incluiu o gradiente como
fazamos antes da especificao (bottom).

Executando Tarefas 68
workflow front end

Repare tambm que nada mudou com o text-shadow, isso porque o autoprefixer no cria
fallbacks. Ele simplesmente acidiona os prefixos, se estes existirem.

Minificando o CSS
Depois que o CSS foi gerado, ns podemos reduzir um pouco o tamanho desse arquivo,
minificando-o. Na prtica, nesse exemplo simples o resultado ser imperceptvel (alguns
bytes), mas se voc estiver trabalhando num projeto maior, mesmo que consiga reduzir
alguns kbytes valer a pena devido simplicidade desse processo.

Para esta tarefa, usaremos o plugin cssmin.

Substitua no lugar adequado no seu Gruntfile

cssmin: {
dist: {
files: {
'deploy/css/main.css': 'deploy/css/main.css'
}
}
},

Repare que ns estamos minificando o arquivo que foi prefixado anteriormente, j na pasta
deploy. OK!

Rode no terminal $ grunt cssmin e veja o que acontece

Minificando e concatenando seus javascripts


A nossa prxima tarefa minificarmos e concatenarmos nossos arquivos javascript. Para
isso, vamos usar o uglify.

Da mesma forma que fizemos anteriormente, altere o seu Gruntfile, incluindo no lugar
adequado o seguinte cdigo:

Executando Tarefas 69
workflow front end

uglify: {
options: {
mangle: true
},

dist: {
files: {
'deploy/javascript/app.min.js': [
'source/javascript/incrementButton.js',
'source/javascript/date.js'
]
}
},
}

Moleza. A propriedade do objeto files o arquivo que ser gerado. O valor dessa
propriedade um array de arquivos, ou seja, o uglify ir concatenar cada um dos arquivos
descritos na array num nico arquivo.

O opo true para o mangle faz com que a minificao seja mais pesada, alterando, quando
possvel, o nome de algumas variveis para reduzir ainda mais o tamanho do arquivo.

Para ver o uglify em ao, voc pode digitar no terminal:


$ grunt uglify

Sempre abra o arquivo gerado no seu editor de cdigo para ver o resultado.

Um detalhe importante: boa prtica no minificar arquivos j minificados, como bibliotecas


de terceiros.

Copiando arquivos estticos


Uma tarefa bastante trivial ter que copiar alguns arquivos estticos para a pasta de
deploy, como por exemplo: arquivos de imagens, arquivos de fontes, javascripts de
terceiros, etc. Para essa tarefa, no usaremos o CTRL+C e CTRL+V, mas sim o plugin
copy.

Da mesma forma que os plugins anteriores, substitua no lugar apropriado de seu Gruntfile.js

Executando Tarefas 70
workflow front end

copy: {
dist: {
files: [
{src: 'source/vendor/*', dest: 'deploy/vendor/'}
]
}
},

A diferena que agora a propriedade files no mais uma string, mas sim um array de
objetos.

Na verdade, o exemplo anterior funcionaria sem precisarmos de um array, ou seja, se


fizssemos dessa forma:

copy: {
dist: {
src: 'source/vendor/*',
dest: 'deploy/'
},
},

Mas a questo que dificilmente temos que copiar somente um diretrio, ou seja,
escrevendo com array voc poder copiar mais de um diretrio sem grandes problemas.

Por exemplo:

copy: {
dist: {
files: [
{src: 'source/vendor/*', dest: deploy/vendor/'},
{src: 'source/images/*', dest: deploy/images/'},
{src: 'source/fonts/*', dest: deploy/fonts/'},
]
}
}

hora de verificarmos se o que fizemos deu certo. No terminal, digite $ grunt copy e em
seguida abra o seu diretrio deploy e veja como ficou. Os arquivos foram copiados? A
estrutura de pasta est certa? Ficou como espervamos? Eu acho que no.

A questo que o Grunt copiou os arquivos, mas no da maneira como estvamos


imaginando. Quando configuramos o Grunt dessa forma: {src: 'source/vendor/*', dest:
'deploy/'} o que espervamos era que todos os arquivos inseridos na pasta vendor

Executando Tarefas 71
workflow front end

fossem copiados para deploy/vendor. Mas na prtica, o que o Grunt fez foi copiar o caminho
completo, desde source, para dentro de deploy. O resultado foi o seguinte caminho:
deploy\vendor\source\vendor. Bem estranho, no mesmo?

Para resolver, precisamos dizer ao Grunt para para, no momento da cpia, se basear
relativamente ao diretrio source, mas no inclu-lo na cpia. Para isso:

expand: true, //habilita o cwd


cwd: 'source/', //relativo ao diretrio source, mas no o inclui na cpia

A configurao final de nosso copy ficou assim:

copy: {
dist: {
expand: true, //habilita o cwd
cwd: 'source/', //relativo ao source, mas no o inclui na cpia
src: 'vendor/*',
dest: 'deploy/',
}
},

Para finalizar, falta configurarmos a cpia da nossa index.html. Veja como deve ficar.

copy: {
dist: {
files: [
{
expand: true, //habilita o cwd
cwd: 'source/', //relativo source, mas no a inclui na cpia
src: 'vendor/*',
dest: 'deploy/'
},
{
expand: true, //habilita o cwd
cwd: 'source/',
src: 'index.html',
dest: 'deploy/'}
]
}
},

Tudo copiado conforme espervamos, mas ainda resta alguns problemas: O arquivo
index.html faz as chamadas s folhas de estilo e ao javascript da seguinte forma:

Executando Tarefas 72
workflow front end

<link rel="stylesheet" href="sass/main.css">

<script src="javascript/date.js"></script>
<script src="javascript/incrementButton.js"></script>

Precisamos atualizar a incluso do javascript apontando para o arquivo concatenado e


minificado e tambm arrumar o caminho do css, apontando para a pasta correta (ns
trocamos o nome do diretrio de "sass" para "css", e isso causou um problema de
referncia)

Eu j trabalhei com dois plugins do GruntJS para resolver esse tipo de problema:

grunt-useref.
grunt-usemin.

Para o nosso guia, eu vou simplesmente pedir que voc altere a chamada do main.css e
app.min.js em "souce" e execute o copy novamente.

Se voc quiser deixar mais profissional, tente por conta prpria usar um dos plugins
descritos acima. Seno, basta alterar o caminho do css e do javascript.

Limpando o diretrio antes do deploy


A cereja do bolo fazer com que, antes de cada deploy, o grunt apague todos os arquivos
da pasta de destino. Isso garante que no sobre arquivos indevidos no nosso diretrio de
deploy, como por exemplo imagens ou fontes que no so mais utilizadas.

Para isso, vamos usar o grunt-contrib-clean.

clean: {
dist: {
src: ["deploy"]
}
}

Esse comando ir limpar deletar o nosso diretrio deploy. No difcil perceber que o
comando $ grunt clean deve ser executado antes de qualquer outro comando.

Ou seja, no nosso terminal, devemos executar os seguintes comandos, nessa ordem:

Executando Tarefas 73
workflow front end

$ grunt clean
$ grunt autoprefixer
$ grunt cssmin
$ grunt uglify
$ grunt copy

Eu acho que seria interessante se tivssemos como executar apenas um comando no


terminal e o prprio grunt executssemos quantas tarefas fossem necessrias. E advinha:
isso possvel. o que veremos a seguir.

Executando Tarefas 74
workflow front end

Executando tarefas em lote


Estamos quase l.

O que nos resta agora fazer com que apenas com um comando no nosso terminal
sejamos capazes de executar todas as tarefas de uma nica vez. Para isso, ns iremos
criar um alias, ou seja, um atalho para mais de uma tarefa criada no Gruntfile.

Veja um exemplo abaixo:

grunt.registerTask(minhaTarefa, [tarefa1, tarefa2, tarefa3])

Dessa forma, se voc digitar no terminal

$ grunt minhaTerefa

As tarefas tarefa1, tarefa2 e tarefa3 sero executadas nessa mesma ordem.

Um detalhe importante que voc pode registrar uma tarefa chamada default. Nesse caso,
l no terminal basta digitar $ grunt que esse "default" ser chamado.

Para esse exerccio, vamos criar uma tarefa chamada "deploy", que conter todas as
tarefas criadas at o momento:

grunt.registerTask("deploy", ["clean", "autoprefixer", "cssmin", "uglify", "copy"])

Agora basta digitarmos no terminal $ grunt deploy que as cinco tarefas sero executadas,
uma a uma.

Isso no demais!?

Para referncia, segue meu Gruntfile.js final:

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

grunt.initConfig({
autoprefixer: {
dist: {
files: {
'deploy/css/main.css': 'source/sass/main.css',
},
},

Tarefas em lote 75
workflow front end

},

copy: {
dist: {
files: [
{
expand: true, //habilita o cwd
cwd: 'source/', //relativo source, mas no a inclui na cpia
src: 'vendor/*',
dest: 'deploy/'
},
{
expand: true, //habilita o cwd
cwd: 'source/',
src: 'index.html',
dest: 'deploy/'}
]
}
},

clean: {
dist: {
src: ["deploy"]
}
},

cssmin: {
dist: {
files: {
'deploy/css/main.css': 'deploy/css/main.css'
}
}
},

uglify: {
options: {
mangle: true
},

dist: {
files: {
'deploy/javascript/app.min.js': [
'source/javascript/incrementButton.js',
'source/javascript/date.js'
]
}
},
}

});

Tarefas em lote 76
workflow front end

grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');

grunt.registerTask('deploy', ['clean', 'autoprefixer', 'cssmin', 'uglify', 'copy'])

Tarefas em lote 77
workflow front end

Consideraes finais.
Nessa seo vimos um workflow bem bsico de como trabalhar com o Grunt. H muito mais
coisa para ver com essa ferramenta, mas vou parando por aqui com a certeza de que, a
partir da leitura dessa seo, voc ser capaz de brincar a vontade com os plugins prontos
ou, quem sabe num futuro prximo, criar os seus prprios.

Deixarei aqui uma lista de plugins que j instalei e que j me salvaram algumas horas do
meu dia, juntamente com o link e uma breve descrio. Guarde-os na manga.

watch. Um dos mais importantes. Como este plugin, voc consegue dizer ao Grunt
para monitorar seus arquivos fonte e rodar determinadas tarefas quando mudanas
acontecerem. Por exemplo, voc pode monitar o seu index.html e, toda vez que esse
arquivo for salvo, automaticamente rodar o copy para a pasta de deploy. uma mo na
roda.
jshint. Ferramenta automatizada para garantir a qualidade de seus cdigos javascripts.
useref. Atualiza as referncias de seus arquivos externos.
uncss. Se voc, assim como eu, se incomoda em usar frameworks CSS por ter que
fazer o usurio baixar um monte de classes css que no esto sendo utilizadas, no se
preocupe. Seus problemas acabaram. O uncss limpa o seu CSS de acordo com o que
est sendo usado em seu HTML. Bootstrap pesado nunca mais.

Na prxima seo, vamos ver como funciona o SASS, um pr-processador CSS famozinho.
At l!

Esse guia ainda est em desenvolvimento. E ainda h muito o que eu falar.

Se quiser saber quando um novo tpico estiver disponvel, siga-me. Eu te aviso por l.

Consideraes finais 78