Installeer de onderstaande tools volgens de instructies:
Voor versie beheer en collaboratie gebruiken we Git. Als centrale plek waar we wijzigingen naar toe pushen gebruiken we Heroku.
Om toegang te krijgen tot de bronbestanden moet je een account bij Heroku hebben. Vraag hiervoor naar Jip of Gijs.
Als je een account hebt, en geautoriseerd bent door Jip of Gijs, kun je de bronbestanden binnenhalen. Open een Terminal venster, navigeer naar de map waar je de bron wilt downloaden en voer het volgende commando uit:
heroku git:clone -a siteconcept-dev
Dit download en installeert de bronbestanden van het prototype.
Voor het prototype hebben we twee versies live staan:
- siteconcept-dev de versie die continue wordt bijgewerkt door het design team
- siteconcept de versie waar sporadisch een nieuwe versie wordt gezet voor business, realisatie en test teams
Om beide omgevingen te benaderen dien je de volgende commandos in Terminal uit te voeren:
git remote rename heroku dev
Bovenstaande verandert de naam heroku naar dev.
heroku git:remote -a siteconcept -r production
Dit voegt de productie remote toe. Nu kun je op 2 manieren pushen:
git push dev master
Dit zet een nieuwe versie live voor het design team en zorgt ervoor dat je teamleden je wijzigingen binnen kunnen halen.
git push production master
Dit zet een nieuwe versie live voor business, ontwikkelaars etc.
Wijzigingen binnenhalen doe je met behulp van het volgende commando:
git pull dev master
Ook kun je gebruik maken van de Github app om eenvoudigere wijzigingen te synchroniseren.
Gulp wordt gebruikt als tool om SASS te converteren, javascript samen te voegen of een icon font te genereren.
Dit gebeurt met behulp van Gulp plugins en node modules. Om te zorgen dat Gulp draait moet je eerst een npm install uitvoeren in een Terminal venster.
Uit ervaring blijkt dat dit zo nu en dan foutmeldingen kan geven. Zorg ervoor dat je niet op het Achmea Wifi netwerk zit en probeer het een aantal keer.
Het belangrijkste onderdeel van Gulp is het gulp.js bestand. Dit bevat de configuratie en scripts.
Met Gulp zijn een aantal taken uit te voeren.
De standaard taak doet het volgende:
- Afbeeldingen worden gekopieerd
- Scripts worden gekopieerd
- Javascript libraries worden via Bower geinstalleerd
- Jade templates worden naar HTML geconverteerd
- SASS wordt met Compass naar CSS geconverteerd
- Een lokale webserver wordt gestart met live sync
Je kunt de taak starten met het commando gulp
- Exporteert alle slices uit Sketch bestanden
- Genegeerd een web icon font
Je kunt de taak starten met het commando gulp export-sketch
- Verwijdert de volledige
distfolder
Je kunt de taak starten met het commando gulp clean
Deze map bevat alle bronbestanden.
css: Alle SASS en CSS bestandenimages: Alle statische afbeeldingen (niet uit Sketch)jade: Jade templates voor HTML en Javascript (Jade lijkt qua syntax erg veel op HAML)js: Alle custom javascriptsketch: visual design document en icon font templates
Deze map bevat uiteindelijk alle gegenereerde HTML, fonts, afbeeldingen en javascript.
De gulp taak export-sketch exporteert alle slices. Vervolgen creëert deze een icon font aan de hand van alle SVG bestanden in de dist/images/icons folder. Een voorbeeld van de glyphs kan worden gezien door naar de webpagina http://localhost:3000/fonts/ te openen.