Professional Documents
Culture Documents
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
3
workflow front end
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.
Se encontrou algum erro, pode fazer um pull request aqui. Agradeo muito!
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
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 !
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.
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:
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:
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
Se voc se identificou com alguns pontos descritos acima, espero que este material seja til
para voc.
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
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
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.
Boa leitura!
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.
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).
E o NPM? 15
workflow front end
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.
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.
At l!
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.
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
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
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
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 ~ $
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
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.
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?
$ echo ~
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.
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
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).
No terminal, digite:
$ git config --global user.name "Seu nome"
$ mkdir PrimeirosPassosWorflow
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?).
$ 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.
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
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.
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:
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.
$ git status (dica: voc pode executar comandos escritos recentemente no terminal
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>
Vamos investigar como est o nosso repositrio git nesse momento (depois de alterar e
salvar, no se esquea, salvar muito importante).
$ git status
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.
Agora que ns temos o nosso primeiro html versionado, quero que voc execute algumas
tarefas:
Para referncia, segue um exemplo bem bobinho que fiz apenas para mostrar:
estilo.css:
body{
background: #ccc;
}
app.js
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.
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
(a flag -a siginica "todos os arquivos" e -m significa que voc quer digitar uma mensagem
no comite).
(um pouco mais verboso, mas exatamente a mesma coisa que as duas linhas acima).
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.
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
Esse comando nos traz apenas o ltimo commite. Se quisermos, por exemplo ver os
ltimos trs, basta digitar:
$ git log -n 3
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.
Avaliando o histrico 34
workflow front end
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.
"O GitHub no um lugar para voc hospedar seus arquivos l. Ele um servio que
possibilita voc deixar o seu repositrio GIT na nuvem."
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
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.
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.
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
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
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 ).
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:
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
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).
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.
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:
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:
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:
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.
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.
ou:
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
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.
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.
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.
$ 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 .
Mas antes de entrar em maiores detalhes, quero explicar para voc que h dois tipos de
dependncias: as de produo e as de desenvolvimento.
Package.json 48
workflow front end
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
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.
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 .
Bootstrap
jQuery
jQuery UI
Underscore
AngularJS
Backbone
Modernizr
Normalize.css
Font Awesome
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
Automatizao de tarefas
Se voc chegou at aqui, meus parabns! At esse ponto, voc j deve ter conhecimento
para:
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.
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:
Existem outras possibilidades ao trabalharmos com o Grunt, mas por hora, vamos focar no
workflow descrito acima.
Automatizao de tarefas 53
workflow front end
projetoWorkflow
|-> .git
|-> deploy
|-> source
|-> javascript
|-> vendor
|-> sass
|- index.html
|- .gitignore
|- package.json
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"
}
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:
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.
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
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"
}
Num dos tpicos passado, instalamos o uglify para minificar nosso js, lembra? Apenas para
recordar, segue o comando para instalar o uglify:
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:
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
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: {
},
});
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
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.
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).
index.html
<!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
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
/*
Mostra a data na tela
*/
;(function(){
'use strict';
var dateContainer = document.getElementById('containerDate');
return date;
})();
dateContainer.appendChild(document.createTextNode(dateInfo));
})();
javascript/incrementButton.css
/*
Conta quantos cliques no boto
*/
;(function(){
'use strict';
var botao = document.getElementById('incrementButton')
, container = document.querySelector('.buttonsContainer__result .js-result')
, count = 0;
showQuant(count);
botao.addEventListener('click', function(e){
showQuant(++count);
})
})();
No prximo tpico, vamos iniciar a configurao de nosso gruntfile para executar as tarefas
que havamos planejado.
Te vejo no futuro!
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).
autoprefixer: {
},
por:
autoprefixer: {
dist: {
files: {
'deploy/css/main.css': 'source/sass/main.css',
},
},
},
$ 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.
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!
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.
Sempre abra o arquivo gerado no seu editor de cdigo para ver o resultado.
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.
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.
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:
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
<script src="javascript/date.js"></script>
<script src="javascript/incrementButton.js"></script>
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.
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.
Executando Tarefas 73
workflow front end
$ grunt clean
$ grunt autoprefixer
$ grunt cssmin
$ grunt uglify
$ grunt copy
Executando Tarefas 74
workflow front end
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.
$ grunt minhaTerefa
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:
Agora basta digitarmos no terminal $ grunt deploy que as cinco tarefas sero executadas,
uma a uma.
Isso no demais!?
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');
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!
Se quiser saber quando um novo tpico estiver disponvel, siga-me. Eu te aviso por l.
Consideraes finais 78