Övning – Lösa sammanslagningskonflikter

• 10 minuter

Ibland blir det fel oavsett hur bra du har planerat. Anta att två utvecklare arbetar med samma projektfil samtidigt. Den första utvecklaren push-överför sina ändringar till grenen main av projektrepo utan problem. När den andra utvecklaren försöker push-överföra sina ändringar säger Git att det finns en sammanslagningskonflikt. Filen som den andra utvecklaren försöker ändra är inte längre uppdaterad när det gäller de senaste ändringarna eller filversionen. Filversionen måste uppdateras innan den andra utvecklarens ändringar kan sammanfogas. Utvecklare som använder versionskontroll fruktar få saker mer än en sammanslagningskonflikt!

Konflikter som denna kan inträffa, så du måste veta hur du hanterar dem. Den goda nyheten är att Git tillhandahåller lösningar för att hantera sammanslagningskonflikter.

Skapa grenar för Alice och Bob

Vi börjar med att skapa en gren för Alice och en gren för Bob. Båda dina utvecklarvänner uppdaterar filer på projektlagringsplatsen samtidigt. De känner inte till varandras ändringar eftersom de gör uppdateringar i sina lokala grenar.

1. Se till att du är i Alice-katalogen och skapa sedan en gren med namnet add-cat alice att arbeta i:

   git checkout -b add-cat
   
   

2. Ändra till Bob-katalogen och skapa sedan en gren med namnet style-cat bob som ska fungera i:

   cd ../Bob
   git checkout -b style-cat
   
   

Nu ska vi göra några ändringar i grenarna.

Göra en ändring som Alice

Börja med att anta rollen som Alice och gör en ändring på webbplatsens startsida. Ersätt bilden av Bobs katt med en bild på Alice.

1. Ändra tillbaka till katalogen Alice :

   cd ../Alice
   
   

2. Om du inte laddade ned resurserna tidigare laddar du ned zip-filen som innehåller de resurser som medföljer den här lektionen. Packa upp resursfilerna:

   wget https://github.com/MicrosoftDocs/mslearn-branch-merge-git/raw/main/git-resources.zip
   unzip git-resources.zip
   
   

3. Flytta filen bombay-cat-180x240.jpg till Katalogen Alice tillgångar och ta bort de andra filerna:

   mv bombay-cat-180x240.jpg Assets/bombay-cat-180x240.jpg
   rm git-resources.zip
   rm bobcat2-317x240.jpg
   
   

4. Öppna filen index.html och ersätt sedan den här instruktionen (som använder en av Bobs kattbilder):

   <img src="Assets/bobcat2-317x240.jpg" />
   

   med den här instruktionen (som använder en av Alice kattbilder):

   <img class="cat" src="Assets/bombay-cat-180x240.jpg" />
   

5. Spara filen och stäng redigeringsprogrammet.

6. Kör nu följande Git-kommandon för att skicka ändringarna till projektrepoen. Först lägger vi till de incheckningar som görs i mappen Tillgångar . Sedan växlar vi tillbaka till grenen main och kör git pull för att se till att ingenting har ändrats. Slutligen sammanfogar vi den add-cat lokala grenen till grenen main och push-överför sedan ändringarna till lagringsplatsen.

   git add Assets
   git commit -a -m "Add picture of Alice's cat"
   git checkout main
   git pull
   git merge --ff-only add-cat
   git push
   
   

Slutför genom att bekräfta att push-överföringen lyckades.

Göra en ändring som Bob

Utan att veta vad Alice gör märker Bob att Alice senaste push-överföring lade till ett CSS-format med namnet cats i site.css-filen för lagringsplatsen. Så Bob bestämmer sig för att tillämpa den klassen på sin kattbild.

1. Gå tillbaka till Bob-katalogen:

   cd ../Bob
   
   

2. Öppna filen index.html. Ersätt -instruktionen som använder Bobs kattbild med följande instruktion som lägger till ett class="cat" attribut till elementet <img> :

   <img class="cat" src="Assets/bobcat2-317x240.jpg" />
   

3. Spara filen och stäng redigeraren.

4. Kör nu följande Git-kommandon för att synkronisera ändringarna till projektrepo som du gjorde för uppdateringarna av Alices lagringsplats. Checka in ändringen, växla till grenen main , kör git pulloch sammanfoga sedan formatändringen:

   git commit -a -m "Style Bob's cat"
   git checkout main
   git pull
   git merge style-cat
   
   

Och där är det: den fruktade sammanslagningskonflikten. Samma rad i samma fil ändrades av två personer. Git ser konflikten och rapporterar "Automatisk sammanfogning misslyckades". Git har inget sätt att veta om src attributet i elementet <img> ska referera till bobcat2-317x240.jpg-filen eller bombay-cat-180x240.jpg filen.

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

Utdata från Git identifierar index.html-filen som källan till konflikten.

Frågan är nu: Vad ska Bob göra?

Lösa sammanslagningskonflikten

Bob har några alternativ i det här läget. Bob kan utföra någon av följande åtgärder:

• git merge --abort Kör kommandot för att återställa grenen main till vad den var innan sammanfogningsförsöket. git pull Kör kommandot för att hämta Alices ändringar. Sedan skapar du en ny gren, gör ändringarna och sammanfogar grenen till grenen main . Slutligen push-överför de sina ändringar.
• git reset --hard Kör kommandot för att komma tillbaka till där de var innan de startade sammanfogningen.
• Lös konflikten manuellt med hjälp av information som Git infogar i de berörda filerna.

Utvecklare verkar föredra det sista alternativet. När Git identifierar en konflikt i innehållsversioner infogas båda versionerna av innehållet i filen. Git använder särskild formatering för att hjälpa dig att identifiera och lösa konflikten: vänster vinkelparenteser <<<<<<<, dubbla bindestreck (likhetstecken) =======och höger vinkelparenteser >>>>>>>. Innehållet ovanför raden med bindestreck ======= visar dina ändringar i din gren. Innehållet under avgränsarraden visar versionen av innehållet i grenen som du försöker sammanfoga till.

Så här ser index.html filen på Bobs lagringsplats ut nu. Observera den speciella formateringen kring innehållet med konflikter:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
    <link rel="stylesheet" href="CSS/site.css">
  </head>
  <body>
    <nav><a href="./index.html">home</a></nav>
    <h1>Our Feline Friends</h1>
    <<<<<<< HEAD
    <img class="cat" src="Assets/bombay-cat-180x240.jpg">
    =======
    <img class="cat" src="assets/bobcat2-317x240.jpg">
    >>>>>>> style-cat
    <footer><hr>Copyright (c) 2021 Contoso Cats</footer>
  </body>
</html>

Nu ska vi lösa sammanslagningskonflikten genom att redigera filen index.html . Eftersom den här sammanslagningskonflikten är en snabbkorrigering gör du ändringen direkt i grenenmain, även om du fortfarande är i Bob-katalogen.

1. Öppna filen index.html och ta sedan bort de särskilda formateringsraderna. Ta inte bort några andra instruktioner.

   <<<<<<< HEAD
   =======
   >>>>>>> style-cat
   

2. Spara filen och stäng redigeraren.

   Filen index.html har nu två <img> element: ett för Bobs kattbild och ett för Alice.

   Vissa textredigerare har Git-integrering och erbjudande för att hjälpa till när de ser text som indikerar en sammanslagningskonflikt. Om du öppnar filen index.html i Visual Studio Code visas följande kod:

   

   Om du väljer Acceptera båda ändringarna tar redigeraren bort raderna runt elementen och lämnar båda elementen <img> intakta.

3. Kör följande kommandon för att genomföra ändringen:

   git add index.html
   git commit -a -m "Style Bob's cat"
   
   

   Kommandot git add anger för Git att konflikten i index.html-filen har lösts.

4. Skicka ändringarna till grenen main på fjärrplatsen:

   git push
   
   

5. Slutför genom att synkronisera ändringarna i Alices lagringsplats:

   cd ../Alice
   git pull
   
   

6. Öppna slutligen Alices index.html-fil och bekräfta att deras version också har två <img> taggar med kattbilder.