Yeoman

Ben je bekend met Yeoman? Dit is een tool die gebruikt kan worden voor het maken van font-eind applicaties. Deze tool werkt via de command line en zorgt dat je een basis file structure krijgt als je een project gaat starten. Het zorgt er ook voor dat je gemakkelijk kan zorgen dat je nieuwe versies van libraries (zoals jQuery) krijgt en veel voorkomende taken makkelijk uit kunt voeren. Er worden hierbij drie tools gebruikt, namelijk Yo, Bower en GruntJS. Yo kan de directory bouwen met structure, met Bower kunnen de libraries worden geïnstalleerd en met GruntJS kun je taken uitvoeren.

Installatie Yeoman

Het eerste wat je moet doen is Yo, Bower en GruntJS installeren. Daar heb je als eerste een NodeJS voor nodig. Je gaat naar nodejs.org en dan klik je op install. NodeJS is een server-side versie van JavaScript. De tools die je gebruikt tijdens het ontwikkelen van een website, worden gemaakt met NodeJS. Je opent je console (CMD in Windows) en dan voer je de command uit. Dit kan even duren: $ npm install -g yo. Je geeft Yo nu de opdracht om zich te installeren. De –g optie geeft aan dat het gaat over globaal, voor het hele systeem. Yo heeft aangegeven dat het met Bower en GruntJS werkt en deze worden nu ook geïnstalleerd, met diverse packages die nodig zijn om er mee te kunnen werken. Als dit klaar is kun je de commands yo, bower en grunt uitvoeren en zie je dat de tools werken.

Generators

Er wordt bij Yeoman gewerkt met generators om de directory structure op te zetten. Het gaat hier over packages die je globaal installeert en die Yo vertellen hoe de directory structure er uit moet komen te zien. De generator packages allemaal beginnen met generator-. Als je een overzicht wil zien van alle generators dan kun je kijken op yeoman.io.

Start een project

Er kan nu een project worden gestart. Er wordt een map aangemaakt en dan navigeer je in de console: $ cd path/to/my-first-yeoman-project. Er wordt nu aan Yeoman aangegeven dat hij de directory structure op moet zetten, waarbij hij gebruik moet maken van de webapp generator: $ yo webapp. Er worden extra libraries/frameworks geïnstalleerd. Je krijgt dan de vraag welke componenten je wil installeren en dan kies je je componenten en dan klik je op oké en dan gaat het proces aan de slag.

Code

De directory structure en handige bestanden zijn nu binnen dus je kunt beginnen. Als je de webapp generator hebt gekozen, dan plaatst deze de echte applicatie in de app. Heb je ook de grunt task grunt build gekozen, dan wordt de map gekopieerd naar de dist map, de map die je op je server zet. Dan heb je de build tak en deze zorgt er voor dat alles geoptimaliseerd wordt en wordt ingepakt. Er is nog een handige grunt task en dat is grunt server, deze start een lokale server. Maar je hebt nu ook een Bower gekregen. Je kunt nu de libraries installeren en de versies updaten. Je vindt de libraries in de app/bower_components directory. Als je de Bower wil laten weten welke libraries hij moet installeren gebruik je het bower.json bestand. Je ziet dan onder dependencies de libraries.

Conclusie

Je kunt verschillende tools gebruiken, je kunt nu in de generator library kijken of je eigen generators aanmaken en kennis maken met de wonderenwereld van front-end development. Kies er nu voor om alles even rustig te proberen en dan weet je direct wat je mogelijkheden zijn met deze tool.

Yeoman