Exercício – Fazer alterações e rastreá-las com o Git

1 minuto

A maioria dos projetos de desenvolvimento é iterativa. Você escreve um código e o testa para verificar se ele funciona. Depois, você escreve mais códigos e convida outras pessoas para fazer contribuições de código. Iteração significa muitas alterações: adições de código, correções de bug, exclusões e substituições.

À medida que você trabalha em seu projeto, o Git ajuda a controlar as alterações feitas. Ele também permite desfazer erros. Nos próximos exercícios, você continuará desenvolvendo o site no qual está trabalhando e aprenderá mais sobre alguns novos comandos importantes, como git diff.

Modificar index.html

A home page do site, index.html, atualmente, contém apenas uma linha de HTML. Vamos atualizá-la para seguirmos em frente e fazer commit da alteração no Git.

Reabra o arquivo index.html no editor online para Cloud Shell (code index.html) e substitua o conteúdo do arquivo pelo seguinte HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
  </head>
  <body>
    <h1>Our Feline Friends</h1>
    <p>Eventually we will put cat pictures here.</p>
    <hr>
  </body>
</html>

Salve o arquivo e feche o editor online.
Use um comando git diff para ver o que foi alterado:
```
git diff
```
O formato de saída é o mesmo do comando diff do UNIX, e o comando do Git usa muitas das mesmas opções. Um sinal de adição é exibido na frente das linhas que foram adicionadas e um sinal de subtração indica as linhas que foram excluídas.

O padrão é que git diff compare a árvore de trabalho com o índice. Em outras palavras, ele mostra todas as alterações que ainda não foram preparadas (adicionadas ao índice do Git). Para comparar a árvore de trabalho com o último commit, use git diff HEAD.

Se o comando não retornar ao prompt após a execução, insira q para sair da exibição de comparação.
Em seguida, faça commit da alteração. Em vez de usar o sinalizador -a, você poderá nomear explicitamente um arquivo a ser preparado e confirmado se o Git já tiver o arquivo no índice (o comando commit procura apenas a existência de um arquivo).
```
git commit -m "Add HTML boilerplate to index.html" index.html
```
Use git diff novamente para comparar a árvore de trabalho com o índice:
```
git diff
```
Desta vez, git diff não produz nenhuma saída, porque a árvore de trabalho, o índice e HEAD estão todos em acordo.
Digamos que você decida que "peludos" parece mais amigável do que "felinos". Substitua as duas ocorrências de "felinos" em index.html por "peludos". Salve o arquivo.

Se você usar o editor de código interno usando o comando code, não verá nada incomum. Mas se, por acaso, você usar outro editor, incluindo um editor chamado sed, o editor provavelmente criará um arquivo index.html.bak do qual você não deseja fazer commit. Editores como o Vim e o Emacs criam arquivos de backup com nomes como index.html~ e index.html.~1~, dependendo de como estão configurados.
Use o seguinte comando para criar e abrir um arquivo chamado .gitgnore no editor de códigos interno:
```
code .gitignore
```
Adicione as seguintes linhas ao arquivo:
```
*.bak
*~
```
Essa linha instrui o Git a ignorar os arquivos cujos nomes terminam com .bak ou ~.

.gitignore é um arquivo muito importante no mundo do Git, porque impede que arquivos incorretos sejam enviados para o controle de versão. Os arquivos .gitignore clichês estão disponíveis para linguagens e ambientes de programação populares.
Salve e feche o editor e use estes comandos para fazer commit das alterações:
```
git add -A
git commit -m "Make small wording change; ignore editor backups"
```
Esse exemplo usa a opção -A com git add para adicionar todos os arquivos sem controle de alterações (e não ignorados) e os arquivos que foram alterados aos que já estão sob o controle do Git.

Se você executar git diff agora, a saída estará vazia porque as alterações foram confirmadas. No entanto, você sempre pode usar um comando git diff HEAD^ para comparar as diferenças entre o último commit e o commit anterior. Experimente isso e veja. Não se esqueça de incluir o caractere ^ de acento circunflexo no final do comando.

Adicionar um subdiretório

A maioria dos sites usa HTML e folhas de estilos CSS, e o site que você está desenvolvendo não é uma exceção. As folhas de estilos normalmente são armazenadas em um subdiretório. Portanto, vamos criar um subdiretório chamado CSS e adicioná-lo ao repositório.

Comece criando um subdiretório chamado CSS no diretório do projeto:
```
mkdir CSS
```
Em seguida, execute git status:
```
git status
```
Por que o Git relata que não há nada a ser confirmado?

As pessoas costumam se surpreender quando descobrem que o Git não considera a adição de um diretório vazio como sendo uma alteração. Isso ocorre porque o Git controla apenas as alterações em arquivos, não em diretórios.

Às vezes, especialmente nos estágios iniciais do desenvolvimento, você deseja ter diretórios vazios como espaços reservados. Uma convenção comum é criar um arquivo vazio, geralmente chamado de .git-keep, em um diretório de espaço reservado.
Use os seguintes comandos para criar um arquivo vazio com esse nome no subdiretório CSS e adicione o conteúdo do subdiretório ao índice:
```
touch CSS/.git-keep
git add CSS
```
Acompanhe isso usando git status novamente para verificar o status do repositório. Confirme se ele relata um novo arquivo.

Substituir um arquivo

Agora, vamos substituir .git-keep por um arquivo CSS e atualizar index.html para referenciá-lo.

Exclua .git-keep do subdiretório CSS:
```
rm CSS/.git-keep
```
Use o editor interno para criar um arquivo chamado site.css no subdiretório CSS:
```
cd CSS
code site.css
```

Adicione o CSS a seguir ao arquivo. Em seguida, salve e feche o arquivo.

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
body { font-family: serif; }

Agora, adicione a seguinte linha a index.html (não se esqueça de voltar ao diretório Cats) após a linha <title> e salve o arquivo modificado:
```
<link rel="stylesheet" href="CSS/site.css">
```
Use git status para ver um resumo dos arquivos que foram alterados. Em seguida, use os seguintes comandos para preparar os arquivos sem controle de alterações para o controle de versão e fazer commit das alterações em site.css e index.html:
```
git add .
git commit -m "Add a simple stylesheet"
```

Ao contrário da maioria dos VCSs, o Git registra o conteúdo dos arquivos em vez dos deltas (alterações) entre eles. Isso representa uma grande parte do que faz com que a confirmação, a ramificação e a alternância entre branches sejam tão rápidas no Git. Outros VCSs precisam aplicar uma lista de alterações para alternar entre uma e outra versão de um arquivo. O Git apenas descompacta a outra versão.

Listar os commits

Agora que você tem um número razoável de alterações registradas, use git log para examiná-las. Assim como acontece com a maioria dos comandos do Git, há várias opções para escolha. Um dos mais úteis é --oneline.

Use o seguinte comando para examinar todos os commits:
```
git log
```

Verifique a saída. Ela será semelhante a este exemplo:

commit ae3f99c45db2547e59d8fcd8a6723e81bbc03b70
Author: User Name <user-name@contoso.com>
Date:   Fri Nov 15 22:04:05 2019 +0000

    Add a simple stylesheet

commit 4d07803d7c706bb48c52fcf006ad50946a2a9503
Author: User Name <user-name@contoso.com>
Date:   Fri Nov 15 21:59:10 2019 +0000

    Make small wording change; ignore editor backups

...

Agora, use este comando para obter uma listagem mais concisa:
```
git log --oneline
```

Verifique a saída novamente. Desta vez, ela será semelhante a este exemplo:

ae3f99c Add a simple stylesheet
4d07803 Make small wording change; ignore editor backups
f827c71 Add HTML boilerplate to index.html
45535f0 Add a heading to index.html
a69fe78 Create an empty index.html file

Você poderá ver por que, quando há centenas (ou milhares) de commits em um projeto, a opção --oneline pode ser sua melhor amiga. Outra opção útil é -nX, em que X é um número de commit: 1 para o último commit, 2 para o anterior a esse etc. Para ver isso por conta própria, experimente usar um comando git log -n2.

Fizemos um progresso significativo no uso da funcionalidade básica do Git. A seguir: avance um nível e saiba como usar o Git para se recuperar de erros comuns.

Continuar

Exercício – Fazer alterações e rastreá-las com o Git

Modificar index.html

Adicionar um subdiretório

Substituir um arquivo

Listar os commits

Comentários