Advarsel: dette er en slyngende, mellomnivå screencast der vi ser på koden som driver en byggeprosess for et nettsted. Vi skriver ingen kode.
En "byggeprosess" er alt som skjer mellom koden du skriver og koden som går ut til et live nettsted. Vi har snakket før om å bruke Grunt til dette. Sass behandles, eiendeler kombineres, minifisering og optimalisering skjer osv. Det er uendelige ting som en byggeprosess kan gjøre for deg.
Jeg har jobbet med Katie Kovalcin for å bygge et nytt personlig nettsted for henne. Det er et eksperiment for oss begge i å lære nye prosesser og prøve nye ting. I dette tilfellet bruker jeg Jekyll for første gang, og jeg automatiserer et SVG-system for første gang.
På skjermtidspunktet er jeg midt i det hele, men jeg fikk byggesystemet til å fungere jevnt, så jeg skjønte at det var en god tid å dele det. Jeg synes alltid det er et godt tidspunkt å dele - akkurat for øyeblikket hvor noe klikker for deg.
Ting skjer:
- Grunt kjører alle oppgavene.
- Nettstedet bygges med Jekyll. Det betyr at den behandler layoutene og innholdet til fulle websider. Når innhold eller layout endres, kjører Grunt Jekyll-bygningen.
- Jekyll driver også den lokale serveren.
- Sass er CSS preprosessor. Når en Sass-fil endres, kjører Grunt Sass-komplikasjonen. Deretter kjører Grunt Autoprefixer på resultatet. Deretter kjører Grunt Jekyll-bygningen igjen for å sikre at alle nye ting kan brukes av det behandlede nettstedet.
- Nettstedet bruker et SVG-system. For ikoner, men også logoen, og hvem-vet-hva-alt annet på slutten av den. SVG-filene holdes alle separate i en "svg" -mappe. Når noen av dem endres, kjører Grunt svgstore-oppgaven for å behandle dem alle sammen. Deretter kjører Grunt Jekyll-bygningen, slik at all nåværende SVG er tilgjengelig for nettstedet.
- Fordi dette er en repo på GitHub, og GitHub Pages støtter Jekyll, kan vi automatisk få en live, vert versjon av dette nettstedet. Vi kan også peke på et annet domene på dette nettstedet.