Exercício - Faça alterações e acompanhe-as com o Git

1 minuto

A maioria dos projetos de programação são iterativos. Você escreve algum código e, em seguida, testa o código e certifica-se de que ele funciona. Em seguida, você escreve mais código e convida outras pessoas para contribuir com código. Iteração significa muitas alterações: adições de código, correções de bugs, exclusões e substituições.

À medida que trabalha no seu projeto, o Git ajuda a registar as alterações feitas. Permite também anular erros. Nos próximos exercícios, você continua construindo o site em que está trabalhando e aprende alguns novos comandos importantes, como git diff.

Modificar o ficheiro index.html

A página inicial do site, index.html, atualmente contém apenas uma linha de HTML. Vamos atualizá-lo para fazer mais e, em seguida, confirmar a alteração no Git.

Reabra o arquivo index.html no editor online do 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.
Utilize um comando git diff para ver as alterações:
```
git diff
```
O formato de saída é o mesmo que o comando Unix diff , e o comando Git tem muitas das mesmas opções. É apresentado um sinal de adição à frente das linhas adicionadas e um sinal de subtração a indicar as linhas que foram eliminadas.

A predefinição é para git diff comparar a árvore de trabalho com o índice. Em outras palavras, ele mostra todas as mudanças que ainda não foram preparadas (adicionadas ao índice do Git). Para comparar a árvore de trabalho com a última consolidação, pode utilizar git diff HEAD.

Se o comando não retornar ao prompt depois de ser executado, entre q para sair da visualização de comparação.
Em seguida, consolide a alteração. Em vez de usar o -a sinalizador, você pode nomear explicitamente um arquivo a ser preparado e confirmado se o Git já tiver o arquivo no índice (o commit comando 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, indexar, e HEAD estão todos de acordo.
Digamos que você decida que "peludo" soa mais amigável do que "felino". Substitua as duas ocorrências de "Felino" em index.html por "Peluda". Em seguida, salve o arquivo.

Se você usou o editor de código interno usando o code comando, não verá nada incomum. Mas, se você usou outro editor, incluindo um editor chamado sed, o editor provavelmente criou um arquivo index.html.bak que você não quer confirmar. Editores como Vim e Emacs criam arquivos de backup com nomes como index.html~ e index.html.~1~, dependendo de como eles são configurados.
Use o seguinte comando para criar e abrir um arquivo chamado .gitignore no editor de código interno:
```
code .gitignore
```
Adicione as seguintes linhas ao ficheiro:
```
*.bak
*~
```
Esta linha instrui o Git a ignorar arquivos com nomes de arquivo terminados em .bak ou ~.

.gitignore é um ficheiro muito importante no mundo do Git, pois impede que ficheiros estranhos sejam submetidos para o controlo de versões. Os arquivos .gitignore Boilerplate estão disponíveis para ambientes e linguagens de programação populares.
Salve e feche o editor e use estes comandos para confirmar as alterações:
```
git add -A
git commit -m "Make small wording change; ignore editor backups"
```
Este exemplo usa a -A opção com git add para adicionar todos os arquivos não rastreados (e não ignorados) e os arquivos que foram alterados aos arquivos que já estão sob controle Git.

Se executar um comando git diff neste momento, o resultado estará vazio porque as alterações foram consolidadas. No entanto, pode sempre utilizar um comando git diff HEAD^ para comparar as diferenças entre a consolidação mais recente e a anterior. Experimente e veja. Não se esqueça de incluir o caractere de cursor ^ no final do comando.

Adicionar um subdiretório

A maioria dos sites usa folhas de estilo HTML e CSS, e o site que você está criando não é exceção. As folhas de estilo normalmente são armazenadas em um subdiretório, então 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, faça um git status:
```
git status
```
Por que o Git relata que não há nada a se comprometer?

As pessoas muitas vezes ficam surpresas ao saber que o Git não considera adicionar um diretório vazio como uma mudança. Isso porque o Git rastreia apenas alterações em arquivos, não alterações em diretórios.

Por vezes, sobretudo nas fases iniciais de programação, quer ter diretórios vazios como marcadores de posição. Uma convenção comum é criar um arquivo vazio, geralmente chamado .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 adicionar o conteúdo do subdiretório ao índice:
```
touch CSS/.git-keep
git add CSS
```
Acompanhe ao utilizar novamente git status para verificar o estado do repositório. Confirme se reporta um ficheiro novo.

Substituir um ficheiro

Agora, vamos substituir .git-keep por um arquivo CSS e atualizá-index.html para fazer referência a ele.

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

Ao contrário da maioria dos VCSes, o Git registra o conteúdo de seus arquivos em vez dos deltas (alterações) entre eles. Esta é uma grande parte do que torna a consolidação, a ramificação e a alternância entre ramos tão rápidas no Git. Outros VCSes têm de aplicar uma lista de alterações a obter entre uma versão de um ficheiro e outra. O Git simplesmente deszipa a outra versão.

Listar consolidações

Agora que tem um número razoável de alterações registadas, pode utilizar git log para vê-las. Como acontece com a maioria dos comandos do Git, existem várias opções à escolha. Uma das mais úteis é --oneline.

Use o seguinte comando para revisar todas as suas confirmações:
```
git log
```

Verifique a saída. Deve 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, deve 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ê pode ver por que, quando você tem centenas (ou milhares) de compromissos em um projeto, a --oneline opção pode ser sua melhor amiga. Outra opção útil é -nX, onde X é um número de confirmação: 1 para a última confirmação, 2 para a anterior e assim por diante. Para ver por si mesmo, experimente um comando git log -n2.

Fizemos progressos substanciais usando a funcionalidade básica do Git. Em seguida: Suba um nível e aprenda a usar o Git para se recuperar de erros comuns.

Exercício - Faça alterações e acompanhe-as com o Git

Modificar o ficheiro index.html

Adicionar um subdiretório

Substituir um ficheiro

Listar consolidações

Comentários