Yeoman

Yeoman is een tool die je helpt bij het maken van font-end applicaties. Het werkt via de command line en zorgt ervoor dat je een basis file structure krijgt wanneer je een project begint, makkelijk kan zorgen dat je nieuwe versies van libraries (zoals jQuery) krijgt en veel voorkomende taken makkelijk kan uitvoeren.

Hiervoor gebruikt het 3 tools: Yo, Bower en GruntJS.
Yo bouwt de directory structure, met Bower kun je libraries installeren en met GruntJS kun je taken uitvoeren.

Laten we eerst Yo, Bower en GruntJS installeren. We hebben eerst NodeJS nodig. Ga hiervoor naar nodejs.org en klik op 'install'.

NodeJS is een server-side versie van JavaScript. Alle tools die je gebruikt tijdens het ontwikkelen van een website zijn gemaakt met NodeJS. NodeJS komt met npm, een package manager voor NodeJS. Hiermee kun je heel makkelijk en snel onze tools installeren.

Open je console (cmd in windows) en voer deze command uit: (dit duurt een tijdje)

$ npm install -g yo

Hiermee geven we de opdracht om 'yo' te installeren. De -g optie geeft aan dat we deze tool globaal, dus voor het hele systeem, willen installeren. Doordat yo heeft aangegeven dat het met Bower en GruntJS werkt worden deze 2 ook geïnstalleerd, samen met heel wat packages die ze nodig hebben om te kunnen werken.

Hierna kun je de commands yo, bower en grunt uitvoeren en zul je zien dat de tools werken.

Yeoman werkt met generators om je directory structure op te zetten. Dit zijn ook weer packages die je globaal installeerd en die Yo vertellen hoe de directory structure eruit moet zien. Alle generator packages beginnen met generator-. Een overzicht van alle generators kun je vinden op yeoman.io. We gaan in deze tutorial een hele simpele website maken (ook wel web applicatie genoemd), dus we installeren de generator-webapp package:

$ npm install -g generator-webapp

Oké, laten we nu een project starten. We maken een map aan en navigeren daarin in de console:

$ cd path/to/my-first-yeoman-project

Nu vertellen we Yeoman dat hij de directory structure op moet zetten, waarbij hij gebruik moet maken van de webapp generator:

$ yo webapp

Naast de standaard directory structure worden er ook wat extra libraries/frameworks geïnstalleerd. Er wordt ons gevraagt welke componenten we willen installeren, hiervoor krijgen we een lijstje waarin er 3 libraries geselecteerd zijn. Stel je wilt alleen Twitter Bootstrap, dan deselecteren jw de andere 2 (navigeer ernaar toe via de pijltjes en klik op spatie om het te (de)selecteren).

Klik op enter als je denkt dat je klaar bent en alles wordt gedownload.

Nu heb je je directory structure en handige bestanden en kun je aan de slag. De webapp generator plaatst de echte applicatie in app. Met de grunt task grunt build wordt deze map gekopiëerd naar de dist map, dit is de map die je op je server zet. De build task zorgt er ook voor dat alles geoptimalizeerd, geminified en ingepakt wordt.

Een andere handige grunt task is grunt server, dit start een lokale server.

Je hebt ook nog Bower gekregen. Hiermee kun je libraries installeren en de versies updaten. Deze libraries vind je in de app/bower_components directory. Om Bower te laten weten welke libraries hij moet installeren gebruik je het bower.json bestand. Onder dependencies zie je de libraries.

We zien dat jQuery en Bootstrap zijn geïnstalleerd. De versie ~1.9.1 betekend dat op zijn minst versie 1.9.1 wordt geïnstalleerd en er worden alleen nieuwe versies in de 1.9.x serie geïnstalleerd. Bower zal altijd proberen een zo nieuw mogelijke versie te installeren.

Stel nu dat we RequireJS in ons project willen installeren. Dan gaan we eerst kijken of de package beschikbaar is: bower search requirejs. Ja! Hij is beschikbaar, nou dan kunnen we hem installeren:

$ bower install --save requirejs

Met de --save optie geven we aan dat we de package opslaan in de bower.json bestand.

Een andere situatie: jQuery heeft een nieuwe versie gepubliceerd. Om deze in ons nieuwe project te krijgen gebruiken we het update command:

$ bower update jquery

En tadaa, we hebben de nieuwe versie van jQuery!

Nu weet je welke tools je kunt gebruiken en de basis van deze tools. Kijk in de generator library of maak je eigen generators en maak kennis van de wonderenwereld van front-end development!