Waarschuwing: dit is een meanderende screencast op gemiddeld niveau waarin we kijken naar de code die een bouwproces voor een site mogelijk maakt. We schrijven geen code.
Een "bouwproces" zijn alle dingen die gebeuren tussen de code die u schrijft en de code die naar een live website gaat. We hebben het eerder gehad over het gebruik van Grunt hiervoor. Sass wordt verwerkt, assets worden gecombineerd, minificatie en optimalisatie vindt plaats, etc. Er zijn oneindig veel dingen die een bouwproces voor je kan doen.
Ik heb met Katie Kovalcin gewerkt aan het bouwen van een nieuwe persoonlijke site voor haar. Het is een experiment voor ons allebei om nieuwe processen te leren en nieuwe dingen uit te proberen. In dit geval gebruik ik Jekyll voor het eerst en ik automatiseer voor het eerst een SVG-systeem.
Op het moment van de screencast zit ik er middenin, maar ik heb het build-systeem soepel laten werken, dus ik dacht dat het een goed moment was om dat te delen. Ik denk altijd dat dit een goed moment is om te delen - precies op het moment waarop iets voor je klikt.
Dingen aan de hand:
- Grunt voert alle taken uit.
- De site wordt gebouwd met Jekyll. Dit betekent dat het de lay-outs en inhoud verwerkt tot volledige webpagina's. Wanneer inhoud of lay-out verandert, voert Grunt de Jekyll-build uit.
- Jekyll draait ook de lokale server.
- Sass is de CSS-preprocessor. Wanneer een Sass-bestand verandert, voert Grunt de Sass-complicatie uit. Vervolgens voert Grunt Autoprefixer uit op het resultaat. Vervolgens voert Grunt de Jekyll-build opnieuw uit om ervoor te zorgen dat alle nieuwe dingen bruikbaar zijn door de verwerkte site.
- De site maakt gebruik van een SVG-systeem. Voor iconen, maar ook voor het logo, en wie-weet-wat-al het andere tegen het einde ervan. De SVG-bestanden worden allemaal apart bewaard in een "svg" -map. Wanneer een van deze verandert, voert Grunt de svgstore-taak uit om ze allemaal samen te verwerken. Vervolgens voert Grunt de Jekyll-build uit, zodat alle huidige SVG beschikbaar is voor de site.
- Omdat dit een opslagplaats op GitHub is en GitHub Pages Jekyll ondersteunt, kunnen we automatisch een live gehoste versie van deze site krijgen. We kunnen ook een ander domein naar deze site verwijzen.