Varning: detta är en slingrande, mellanliggande skärmutsändning där vi tittar på koden som driver en byggprocess för en webbplats. Vi skriver ingen kod.
En "byggprocess" är allt som händer mellan koden du skriver och koden som går ut till en levande webbplats. Vi har pratat tidigare om att använda Grunt för detta. Sass bearbetas, tillgångar kombineras, minifiering och optimering sker etc. Det finns oändliga saker som en byggprocess kan göra för dig.
Jag har arbetat med Katie Kovalcin för att bygga en ny personlig webbplats för henne. Det är ett experiment för oss båda att lära oss nya processer och prova nya saker. I det här fallet använder jag Jekyll för första gången och automatiserar ett SVG-system för första gången.
Vid skärmdumpens gång är jag mitt i det hela, men jag fick byggsystemet att fungera smidigt så jag tänkte att det var en bra tid att dela det. Jag tycker alltid att det är en bra tid att dela - just nu när något klickar för dig.
Saker händer:
- Grunt kör alla uppgifter.
- Webbplatsen byggs med Jekyll. Det betyder att det bearbetar layouter och innehåll till hela webbsidor. När innehåll eller layout ändras kör Grunt Jekyll-byggnaden.
- Jekyll driver också den lokala servern.
- Sass är CSS-förprocessorn. När en Sass-fil ändras kör Grunt Sass-komplikationen. Sedan kör Grunt Autoprefixer på resultatet. Sedan kör Grunt Jekyll-byggnaden igen för att se till att alla nya saker kan användas av den bearbetade webbplatsen.
- Webbplatsen använder ett SVG-system. För ikoner, men också logotypen och vem-vet-vad-allt annat i slutet av den. SVG-filerna hålls alla separata i en "svg" -mapp. När någon av dem ändras kör Grunt svgstore-uppgiften för att bearbeta dem alla tillsammans. Sedan kör Grunt Jekyll-byggnaden så att alla nuvarande SVG är tillgängliga för webbplatsen.
- Eftersom detta är en repo på GitHub och GitHub Pages stöder Jekyll, kan vi automatiskt få en live, värdversion av den här webbplatsen. Vi kan också peka på en annan domän på den här webbplatsen.