Branching basiscommando's

Voor de voorbeelden die horen bij dit hoofdstuk, maken we gebruik van een bestaande repo. We gaan ook gebruik maken van Visual Studio Code om de bestanden te wijzigen, testen en om de Git repo op orde te houden... Zorg er dus voor dat dit programma geïnstalleerd is.

Namen bij branching

Vanaf het ogenblik dat een Git directory geïnitialiseerd wordt, wordt ook meteen een eerste branch aangemaakt die standaard "master" zal heten. Indien je liever een andere branch naam hebt bij het initialiseren gebruik je het -b argument.

git init -b [branchnaam]

Indien je nadien de naam van een branch nog wilt veranderen kan dit ok nog met he commando git branch -m [branchnaam_old] [branchnaam_new]

De huidige branch waarin je werkt krijg je steeds te zien wanneer je de status van de repo opvraagt. In verschillende terminals is de branchnaam ook (in blauw en tussen haakjes) te zien na de directorynaam van de repo. In de gewone

In de Windows Opdrachtpromp terminal is dit niet het geval. Wil je dan de naam zien van de branch waarin je aan het werken bent gebruik je volgend commandogit branch. Dit commando kan je uiteraard in elke termin al gebruiken. Je krijgt als resultaat dan alle branches van je repo en de branch waarin je nu aan het werken bent woordt normaak voorafgegaan door een asterik en staat in een andere kleur.

Nieuwe branch maken

Om een nieuwe branch te maken gebruik je het commandogit branch [branchnaam].

Stel, we hebben zoals in het voorbeeld dat we daarnet gekloond hebben een project opgestart, en al enkele commits doorgevoerd. De situatie ziet er dan uit zoals onderstaande figuur.

1 master branch

Het voorbeeldproject bestaat uit een aantal types bestanden. Afhankelijk van het type bestand dat we gaan aanpassen, kunnen we nu volgende zaken doen:

  • Inhoud toevoegen/aanpassen aan "index.html"

  • Layout aanpassen in "style.css"

  • Functionaliteit toevoegen/aanpassen in "index.js" en "index.html"

We kiezen ervoor om de inhoud van index.html aan te passen in de branch "master". Hiervoor hoeven we dus niets te doen.

We hebben nu een situatie gecreëerd waarbij er in onze repo 2 branches zijn: "master" en "layout". We werken in de branch "master" verder op de laatste commit. De branch layout ziet er nu (nog) exact hetzelfde uit als de branch "main".

2de branch toegevoegd

We hebben nu een nieuwe commit bij de branch "master" , maar niet bij de branch "layout". De nieuw situatie is dus de volgende.

Nieuwe commit in "master"

Tussen branches schakelen (switching)

In deze tutorial gaan we er van uit dat we, vooraleer we wisselen van branch, eerst een commit uitvoeren in de actieve branch. Op die manier is zowel de working directory als de staging area ongewijzigd wanneer we de branch verlaten. Het kan ook anders, maar dit bespreken we nu niet.

Om te wisselen tussen branches gebruiken we het commando git branch branchnaam.

Hieronder zie je de nieuwe situatie. Door te switchen tussen de brances "master" en "layout", keren we steeds terug naar de laatste commit van die branch. Vanaf dat punt kunnen we ook eventueel terugkeren naar vorige snapschots.

Nieuwe commit in "layout"

Branchen samenvoegen (merging)

Wanneer in de branch "master" alle inhoud is ingevuld en wanneer in de branch "layout" alle instellingen i.v.m. de layout gebeurd zijn, worden deze samengevoegd. (Uiteraard kan dit tussendoor ook al eens gebeuren.) Hiervoor ga je eerst terug naar de branche "master". Daarna gebruik je het commando git merge branchnaam.

Na het samenvoegen, hoeft er geen commit uitgevoerd te worden. Dit gebeurd automatisch met 'Merge branch [branchnaam]' als boodschap.

Alle wijzigingen van de verschillende branches zijn nu samengevoegd. We kunnen nog steeds terugkeren naar vorige snapschots. De situatie ziet er nu als volgt uit:

Merge

Conflicten bij merging

Het is mogelijk om vanuit verschillende branches aanpassingen te maken in hetzelfde bestand. Uiteraard kan je niet zomaar alles veranderen en dan verwachten dat Git alles perfect samenvoegd. Wanneer wanner je niet oplet, kunnen er op die manier al eens conflicten optreden.

Branch verwijdenren

Een eerder gemaakte kan je terug verwijderen met het commando git branch -d [naam van de te wissen branch]. Die kan

Oefening

  1. Voeg een branch "features" toe aan het project. In deze branch gaan we ervoor zorgen dat, wanneer we op de afbeelding klikken, er volgende tekst in een popup verschijnt: "Verander deze foto door een foto van jezelf". Hiervoor moeten er een aantal zaken gebeuren:

index.js

Voeg volgende code toe:

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
  }
style.css

Voeg volgende code toe:

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 300px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    top: -40%;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -80px;
   }
     
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

index.html

Verander volgende code:

        <img src="img/profile.png" alt="Profile picture" style="width: 150px; height: 150px; border-radius: 100px;">

Door:

 <div class="popup" onclick="myFunction()">
      <span class="popuptext" id="myPopup">Verander deze foto door een foto van jezelf</span>         
      <img src="img/profile.png" alt="Profile picture" style="width: 150px; height: 150px; border-radius: 100px;">
 </div>
  1. Experimenteer wat in de branch "layout" met het bestand "style.css" om de layout aan te passen.

  2. Pas in de branc "master" de inhoud aan, zodat dit overeenkomt met jouw profiel. Pas steeds de eerder geziene princies over Git en branching toe.

Last updated