Übung: Zusammenführen von Bobs Verzweigung

  • 10 Minuten

Während Alice am CSS-Code für die Website arbeitet, weiß Bob an seinem Heimarbeitsplatz nichts über die Arbeit von Alice. Aber das muss er auch gar nicht, weil beide auf Verzweigungen arbeiten. Bob beschließt, eigene Änderungen vorzunehmen.

Erstellen einer Verzweigung für Bob

  1. Kehren Sie zum Bob-Verzeichnis zurück, und führen Sie den folgenden Befehl aus, um einen Branch mit dem Namen add-cat zu erstellen. Verwenden Sie dazu die häufig genutzte Option checkout -b, um die Verzweigung zu erstellen und über einen einzigen Befehl zu ihr zu wechseln:

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

  2. Laden Sie die ZIP-Datei herunter, die einige Ressourcen der Website enthält. Entzippen Sie dann die Ressourcendateien:

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

  3. Verschieben Sie nun die Datei bobcat2-317x240.jpg in das Verzeichnis Assets von Bob. Löschen Sie die anderen Dateien. Sie laden die Dateien später herunter und verwenden sie erneut.

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

  4. Öffnen Sie als Nächstes die Datei index.html, und ersetzen Sie die Zeile „Eventually we will put cat pictures here“ (Hier später Katzenbilder hochladen) durch Folgendes:

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

  5. Speichern Sie die Datei, und schließen Sie den Editor.

  6. Sie haben zwei Änderungen an der Verzweigung add-cat von Bob vorgenommen: Sie haben eine Datei hinzugefügt und eine andere geändert. Führen Sie git status aus, um Ihre Änderungen zu überprüfen:

    git status

  7. Führen Sie dann die folgenden Befehle aus, um die neue Datei im Verzeichnis Objekte dem Index hinzuzufügen und alle Änderungen zu comitten:

    git add .
git commit -a -m "Add picture of Bob's cat"

  8. Bob führt nun die gleiche Aktion aus, die Alice zuvor bereits ausgeführt hat. Er wechselt zurück zum main-Branch und führt einen Pull aus, um festzustellen, ob sich etwas geändert hat:

    git checkout main
git pull

  9. Überprüfen Sie die Ausgabe. Dieses Mal deutet die Ausgabe darauf hin, dass tatsächlich Änderungen an der Verzweigung main im freigegebenen Repository vorgenommen wurden (als Ergebnis des Pushs von Alice). Außerdem wird aus dieser Ausgabe ersichtlich, dass die aus main gepullten Änderungen im gemeinsamen Repository mit der Verzweigung main in Bobs Repository zusammengeführt wurden:

    remote: Counting objects: 4, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 4 (delta 1), reused 0 (delta 0)
Unpacking objects: 100% (4/4), done.
From D:/Labs/Git/Bob/../Shared
   e81ae09..1d2bfea  main     -> origin/main
Updating e81ae09..1d2bfea
Fast-forward
 Assets/site.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

  10. Als Nächstes führt Bob seine Verzweigung mit der Verzweigung zusammen, sodass in seinem Repository sowohl seine mainals auchmain Alices Änderungen enthält. Dann pusht Bob main auf seinem Computer in die Verzweigung main im freigegebenen Repository:

    git merge add-cat --no-edit
git push

Bob verwendete nicht das --ff-only-Flag, da er wusste, dass sich main geändert hat. Ein Merge nur über einen Vorlauf hätte zu einem Fehler geführt.

Synchronisieren der Repositorys

Zu diesem Zeitpunkt verfügt Bob im Gegensatz zu Alice über ein aktuelles Repository. Alice muss den Befehl git pull im freigegebenen Repository ausführen, um sicherzustellen, dass sie über die neueste und beste Version der Website verfügt.

Führen Sie die folgenden Befehle aus, um das Repository von Alice mit dem freigegebenen Repository zu synchronisieren:

cd ../Alice
git pull

Nehmen Sie sich einen Moment Zeit, um zu überprüfen, ob die Repositorys von Alice und Bob synchronisiert sind. Jedes der Repositorys sollte im Verzeichnis Objekte eine JPG-Datei und ein in der index.html-Datei deklariertes <img>-Element haben. Die Datei site.css im Ordner Assets der einzelnen Repositorys sollte eine Zeile enthalten, die einen CSS-Stil mit dem Namen cat (Katze) definiert. Dieser Stil wurde von Alice hinzugefügt, als sie ihre Änderungen vorgenommen hat.

Wenn Sie index.html in einem Browser öffnen, sehen Sie das folgende Bild:

Screenshot mit Katzen auf der Website

In der nächsten Lektion erfahren Sie, wie Sie Mergekonflikte lösen können, die auftreten, wenn sich von zwei oder mehr Entwickler*innen vorgenommene Änderungen überschneiden.