Övning – Gör ändringar och spåra dem med Git

1 minut

De flesta utvecklingsprojekt är iterativa. Du skriver lite kod och sedan testar du koden och ser till att den fungerar. Sedan skriver du mer kod och bjuder in andra att bidra med kod. Iteration innebär många ändringar: kodtillägg, felkorrigeringar, borttagningar och ersättningar.

Allt eftersom du arbetar med projektet hjälper Git till att hålla koll på de ändringar du gör. Du kan även ångra misstag. I nästa övningar fortsätter du att skapa den webbplats som du arbetar med och lära dig några viktiga nya kommandon, till exempel git diff.

Ändra index.html

Webbplatsens startsida, index.html, innehåller för närvarande bara en html-rad. Nu ska vi uppdatera den för att göra mer och sedan checka in ändringen till Git.

Öppna filen index.html igen i onlineredigeraren för Cloud Shell (code index.html) och ersätt filinnehållet med följande 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>

Spara filen och stäng onlineredigeraren.
Använd kommandot git diff för att se vad som har ändrats:
```
git diff
```
Utdataformatet är samma som Unix-kommandot diff och Git-kommandot har många av samma alternativ. Ett plustecken visas framför rader som har lagts till, och ett minustecken anger rader som har tagits bort.

Standardinställningen är att git diff jämför arbetsträdet med indexet. Med andra ord visas alla ändringar som inte har mellanlagrats (lagts till i Git-indexet) ännu. Om du vill jämföra arbetsträdet med den senaste incheckningen kan du använda git diff HEAD.

Om kommandot inte återgår till kommandotolken när det har körts anger du q för att avsluta diffvyn.
Checka sedan in ändringen. I stället för att -a använda flaggan kan du uttryckligen namnge en fil som ska mellanlagras och checkas in om Git redan har filen i indexet ( commit kommandot söker bara efter förekomsten av en fil).
```
git commit -m "Add HTML boilerplate to index.html" index.html
```
Använd git diff igen för att jämföra arbetsträdet med indexet:
```
git diff
```
Den här gången git diff genererar inga utdata eftersom arbetsträdet, indexet och HEAD alla är överens.
Låt oss säga att du bestämmer dig för att "furry" låter vänligare än "kattdjur". Ersätt de två förekomsterna av "Feline" i index.html med "Furry". Spara sedan filen.

Om du använde den inbyggda kodredigeraren med hjälp code av kommandot ser du inget ovanligt. Men om du råkade använda en annan redigerare, inklusive en redigerare med namnet sed, skapade redigeraren förmodligen en index.html.bak-fil som du inte vill checka in. Redigerare som Vim och Emacs skapar säkerhetskopior med namn som index.html~ och index.html.~1~, beroende på hur de är konfigurerade.
Använd följande kommando för att skapa och öppna en fil med namnet .gitignore i den inbyggda kodredigeraren:
```
code .gitignore
```
Lägg till följande rader i filen:
```
*.bak
*~
```
Den här raden instruerar Git att ignorera filer som har filnamn som slutar med .bak eller ~.

.gitignore är en mycket viktig fil i Git-världen eftersom den förhindrar att överflödiga filer skickas till versionskontrollen. .gitignore-filer för boilerplate är tillgängliga för populära programmeringsmiljöer och språk.
Spara och stäng redigeraren och använd sedan dessa kommandon för att genomföra ändringarna:
```
git add -A
git commit -m "Make small wording change; ignore editor backups"
```
I det -A här exemplet används alternativet med git add för att lägga till alla ospårade (och inte ignorerade) filer och de filer som har ändrats till de filer som redan finns under Git-kontroll.

Om du utför en git diff just nu blir utdata tomma eftersom ändringarna har checkats in. Du kan dock alltid använda kommando git diff HEAD^ för att jämföra skillnader mellan den senaste incheckningen och föregående incheckning. Prova och se. Glöm inte att inkludera caret-tecknet ^ i slutet av kommandot.

Lägg till en underkatalog

De flesta webbplatser använder HTML- och CSS-formatmallar, och webbplatsen du skapar är inget undantag. Formatmallar lagras vanligtvis i en underkatalog, så vi skapar en underkatalog med namnet CSS och lägger till den på lagringsplatsen.

Börja med att skapa en underkatalog med namnet CSS i projektkatalogen:
```
mkdir CSS
```
Gör sedan en git status:
```
git status
```
Varför rapporterar Git att det inte finns något att checka in?

Personer är ofta förvånade över att git inte överväger att lägga till en tom katalog som en ändring. Det beror på att Git endast spårar ändringar i filer, inte ändringar i kataloger.

Ibland kan du vilja ha tomma kataloger som platshållare, särskilt under de första utvecklingsfaserna. En vanlig konvention är att skapa en tom fil, ofta kallad .git-keep, i en platshållarkatalog.
Använd följande kommandon för att skapa en tom fil med det namnet i CSS-underkatalogen och lägga till innehållet i underkatalogen i indexet:
```
touch CSS/.git-keep
git add CSS
```
Använd därefter git status igen för att kontrollera status för repon. Bekräfta att den rapporterar en ny fil.

Ersätt en fil

Nu ska vi ersätta .git-keep med en CSS-fil och uppdatera index.html för att referera till den.

Ta bort .git-keep från CSS-underkatalogen:
```
rm CSS/.git-keep
```
Använd den inbyggda redigeraren för att skapa en fil med namnet site.css i CSS-underkatalogen:
```
cd CSS
code site.css
```

Lägg till följande CSS i filen. Spara och stäng sedan filen.

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

Lägg nu till följande rad i index.html (glöm inte att gå tillbaka till katalogen Cats ) efter <title> raden och spara den ändrade filen:
```
<link rel="stylesheet" href="CSS/site.css">
```
Använd git status för att se en sammanfattning av de filer som har ändrats. Använd sedan följande kommandon för att mellanlagra ospårade filer till versionskontroll och checka in ändringarna till site.css och index.html:
```
git add .
git commit -m "Add a simple stylesheet"
```

Till skillnad från de flesta VCSes registrerar Git innehållet i dina filer i stället för deltan (ändringarna) mellan dem. Det är av de största anledningarna till att incheckning, förgrening och växling mellan grenar går så snabbt i Git. Andra VCS måste tillämpa en lista över ändringar för att hämta skillnaderna mellan olika filversioner. Git packar helt enkelt upp den andra versionen.

Visa incheckningar

Nu när du har ett rimligt antal ändringar som har registrerats kan du använda git log för att titta på dem. Precis som med de flesta Git-kommandon finns det många alternativ att välja mellan. Ett av de mest användbara är --oneline.

Använd följande kommando för att granska alla incheckningar:
```
git log
```

Kontrollera utdata. Det bör se ut ungefär som i det här exemplet:

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

...

Använd nu det här kommandot för att få en mer kortfattad lista:
```
git log --oneline
```

Kontrollera utdata igen. Den här gången bör det se ut som i det här exemplet:

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

Du kan se varför alternativet kan vara din bästa vän när du är hundratals (eller tusentals) incheckningar i ett projekt --oneline . Ett annat användbart alternativ är -nX, där X är ett incheckningsnummer: 1 för den senaste incheckningen, 2 för den före det och så vidare. Du kan prova själv via kommandot git log -n2.

Vi har gjort betydande framsteg med hjälp av de grundläggande funktionerna i Git. Nästa steg: Stega upp den på en nivå och lär dig hur du använder Git för att återställa från vanliga misstag.

Fortsätt

Övning – Gör ändringar och spåra dem med Git

Ändra index.html

Lägg till en underkatalog

Ersätt en fil

Visa incheckningar

Feedback