Advarsel: dette er en meanderende mellemliggende screencast, hvor vi ser på koden, der driver en byggeproces for et websted. Vi skriver ingen kode.
En "byggeproces" er alle de ting, der sker mellem den kode, du skriver, og den kode, der går ud til et live-websted. Vi har tidligere talt om at bruge Grunt til dette. Sass behandles, aktiver kombineres, minificering og optimering sker osv. Der er uendelige ting, som en byggeproces kan gøre for dig.
Jeg har arbejdet med Katie Kovalcin om at opbygge et nyt personligt sted til hende. Det er et eksperiment for os begge med at lære nye processer og prøve nye ting. I dette tilfælde bruger jeg Jekyll for første gang, og jeg automatiserer et SVG-system for første gang.
På tidspunktet for screencast var jeg lige midt i det hele, men jeg fik build-systemet til at fungere glat, så jeg regnede med, at det var et godt tidspunkt at dele det. Jeg synes altid, det er et godt tidspunkt at dele - lige i det øjeblik, hvor noget klikker på for dig.
Ting der foregår:
- Grunt kører alle opgaverne.
- Webstedet bygges med Jekyll. Det betyder, at det behandler layout og indhold til fulde websider. Når indhold eller layout ændres, kører Grunt Jekyll-build.
- Jekyll kører også den lokale server.
- Sass er CSS-forprocessoren. Når en Sass-fil ændres, kører Grunt Sass-komplikationen. Derefter kører Grunt Autoprefixer på resultatet. Derefter kører Grunt Jekyll-bygningen igen for at sikre, at alle nye ting kan bruges af det behandlede sted.
- Webstedet bruger et SVG-system. Til ikoner, men også logoet og hvem-ved-hvad-alt andet i slutningen af det. SVG-filerne opbevares alle adskilt i en "svg" -mappe. Når nogen af dem ændres, kører Grunt svgstore-opgaven for at behandle dem alle sammen. Derefter kører Grunt Jekyll-bygningen, så al den aktuelle SVG er tilgængelig for webstedet.
- Da dette er en repo på GitHub, og GitHub Pages understøtter Jekyll, kan vi automatisk få en live, hostet version af dette websted. Vi kan også pege på et andet domæne på dette websted.