Wouter J

Git Introductie

article

Vandaag installeren we GIT op onze computer en krijg je een introductie in GIT. Hoe werkt het, wat moet je weten, enz. En aan het eind gaan we misschien eindelijk echte code maken.

GIT installeren

Ik bespreek hier alleen hoe je GIT moet installeren op Windows, omdat de meeste bezoekers windows gebruiken. Voor de Macs en Linux gebruikers zijn er handige tutorials te vinden op github:

GIT voor Windows

GIT installeren op Windows is eigenlijk heel erg makkelijk. GIT heeft een Windows versie die, heel toepasselijk, GIT for windows heet. We downloaden de nieuwste versie, bij tijd van schrijven van dit artikel is dat GIT-1.7.10. Vervolgens voeren we het bestandje uit en kunnen we de stappen volgen. Er wordt ons opgegeven moment gevraagd of we alleen de Git Bash willen gebruiken of ook via de Windows Command Prompt. Ik heb er zelf voor gekozen om alleen de GIT bash te gebruiken (die ik vervolgens aan mijn cmd heb gekoppeld) i.p.v. de windows command prompt, omdat het niet helemaal lekker loopt. Als er wordt gevraagd om PuTTY te gebruiken moet je het niet doen, we gaan nu alleen maar SSH gebruiken.

Even voorstellen aan GIT

Vervolgens moeten we ons gaan voorstellen aan GIT, wie zijn we eigenlijk? En wat is ons mail adres? Dit is later handig voor als je samen gaat werken met GitHub of andere GIT-sites, want dan hebben we dit nodig.

Open je eerst GIT bash (Windows > start > alle programma's > git > GIT bash). GIT bash is eigenlijk de gewone CMD command prompt met wat extra GIT functies. Als je het Command Prompt nog bijna nooit gebruikt hebt even een spoed cursus:

Met cd navigeer je van map naar map. Bijv:

1
2

$ cd My-Project
C:\Users\Wouter\My-Project

Als je naar een andere schrijf navigeert moet je doormiddel van de naam van de schrijf + : ernaar toe navigeren:

1
2
3

$ cd D:\Wamp\www\My-Project
$ d:
D:\Wamp\www\My-Project

Nu gaan we weer verder met waar we gebleven zijn. We hebben onze GIT Bash geopend en nu gaan we ons voorstellen. Dit doen we als volgt:

1
2

$ git config --global user.name "Wouter J"
$ git config --global user.email "my@email.com"

Nu hebben we ons voorgesteld!

Tijd om te beginnen

Ja, dan gaan we eindelijk beginnen. Al dat gepraat, daar houd een developer natuurlijk niet van, dus nu gaan we wat codes schrijven.

We maken een heel simpel projectje aan op onze computer. Ik download de HTML5 boilerplate en zet die in D:\Wamp\www\My-Project\. Nu openen we weer onze Bash en gaan we naar deze locatie toe:

1

$ cd \d\wamp\www\my-project\

(in de bash gaat het iets anders dan in de command prompt)

Nu gaan we GIT aanzetten in dit project. Dit doe je met het git init command. Alles commands van GIT beginnen met git gevolgt door en spatie en hun naam. Als je informatie wilt over een bepaald command gebruik je `git help

`.

1

$ git init

Zo nu kunnen we aan de slag! Per verandering gaan we een nieuwe versie aanmaken, dit noemen we vanaf nu een commit. Je moet hierbij niet denken aan de versies in bijv. jQuery. Met een versie bedoelen we dat GIT onthoud hoe het project er op dat tijdstip uitziet.

De opbouw van GIT

GIT werkt met 3 area’s, zoals je ook al in de eerste blogpost hebt gelezen. Deze area’s hebben allemaal een eigen taak:

Werk area

Dit is de map die op de computer staat. Alles wat je dus in de bestanden aanpast en welke bestanden toegevoegd worden zie je direct veranderen.

Staging area

Dit is een geniaal iets in GIT. Voordat je iets commit moet je de bestanden die je wilt commiten in de staging area zetten. Hierdoor hoef je niet alle wijzigen uit de werk area direct om te zetten in de staging area.

Repository area

Als je een commit doet wordt de commit + de status van de bestanden opgeslagen in de git repository (kortweg repo).

Bestanden in de staging zetten

Zo nu gaan we eerst de bestanden in de staging zetten. Dat doe je met de git add method. Deze method verwacht minimaal 1 parameter: de naam/path van het bestand. Door spaties tussen de bestandnamen te laten kun je meerdere bestanden tegelijkertijd in de staging zetten. Maar in ons geval willen we alle bestanden hebben. Waarom zouden we ze dan allemaal apart typen? Hiervoor heeft GIT het . teken uitgevonden, dit betekend alle bestanden. Dus laten we dat maar doen:

1

$ git add .

Tijd voor de commit

Nu we hebben geselecteerd wat we willen commiten is het tijd om de commit te doen. Hiervoor heeft GIT de git commit method. Als je dit command runt probeerd GIT Vim te openen, dit is een editor die in de command prompt werkt. Mocht je dit niet willen moet je de vlag -m gebruiken. Dan kun je de parameter als de naam gebruiken. Maar normaal wordt het dus:

1

$ git commit

Nu wordt er in je command prompt Vim geopend. Vervolgens staat vim in de visual mode, door i in te drukken (of a) ga je naar insert mode (de mode waarin je kan typen). Nu typ je de commit naam (in ons geval ‘Getting Started’) en nu klik je op Ctrl + [ hiermee ga je weer naar visual mode en dan doe je :wq dit write (opslaan) de naam en vervolgens quit (sluit) Vim. Nu ben je weer terug en is je commit opgeslagen. In het schermpje waar je nu bent kun je zien welke bestanden er zijn toegevoegd, aan welke branch (hierover de volgende keer meer) en wat er precies is veranderd.

Checken

Nu willen we kijken of alles gelukt is. Dit doen we met git log, dit laat alle recente commits zien. In ons geval staat er maar 1. Laten we eens kijken wat erin staat

commit 0935a1f33c8e75ab7356c3e94f27f397ffd7b472
Author: WouterJ <my @email.com>
Date:   Thu Apr 12 15:49:27 2012 +0200
    Getting Started

We zien hier een hash (die lange tekenreeks) dat ‘de versie’ voorstelt. Het voordeel van zo’n hash ten opzichte van een simpele versie nummer is dat deze altijd uniek is. Als we de volgende keer aan de slag gaan met commits zul je zien dat alleen de eerste 7 tekens hiervan belangrijk zijn.

Dan komt de gegevens over wie de commit heeft gedaan (handig als je in een team werkt) en de datum waarop. Vervolgens zie je de korte commit beschrijving.

Aanpassen

Oké, we hebben nu heel veel dingen aangepast aan ons project. Tijd voor de volgende commit. We willen dingen apart commiten, eerst de HTML veranderingen, dan de CSS veranderingen en dan JS. Eerst wil ik weten welke bestanden er allemaal sinds de laatste commit gewijzigd zijn, dit doen we met de git status command. Nu krijg je een overzicht van bestanden/mappen die aangepast zijn. Vervolgens voegen we weer alle HTML bestanden toe aan de staging area:

1

$ git add index.html

Hierdoor voegen we index.html toe aan de pagina. Stel dat we nu alle bestanden die eindigen op .html willen toevoegen gebruiken we *.html de * wordt dan door de bestandsnaam vervangen. Nu kunnen we weer onze commit uitvoeren

1

$ git commit -m '[HTML] Added header'

En we voegen heel de css directory toe aan de staging area, voor de volgende commit:

1
2

$ git add css/.
$ git commit -m '[CSS] Changed RESET and added header'`</pre>

Met css/. voeg je alle bestanden in de css map toe aan de commit.

En zo doen we het ook voor de andere commits.

Je kan nog veel meer

Maar je kan nog veel meer met commits. De volgende keer ga ik daarop in en ook op wat andere dingen die je met GIT kunt doen zoals branches, gitignore en meer!