Varování: toto je klikaté, střední úroveň screencastu, ve kterém se podíváme na kód, který řídí proces sestavení webu. Nepíšeme žádný kód.
„Proces sestavení“ je všechno, co se děje mezi kódem, který napíšete, a kódem, který jde na živý web. Už jsme mluvili o tom, že k tomu použijeme Grunt. Sass se zpracovává, aktiva se kombinují, dochází k minifikaci a optimalizaci atd. Existuje spousta věcí, které pro vás může proces sestavení udělat.
Spolupracoval jsem s Katie Kovalcin na vytvoření nového osobního webu pro ni. Je to experiment pro nás oba při učení se novým procesům a zkoušení nových věcí. V tomto případě používám Jekyll poprvé a poprvé automatizuji systém SVG.
V době vysílání jsem přímo uprostřed toho všeho, ale systém sestavení fungoval hladce, takže jsem usoudil, že je vhodná doba to sdílet. Vždy si myslím, že je vhodná doba na sdílení - právě v okamžiku, kdy pro vás něco klikne.
Věci se dějí:
- Grunt provádí všechny úkoly.
- Web je vytvářen pomocí Jekyll. To znamená, že zpracovává rozvržení a obsah na celé webové stránky. Když se změní obsah nebo rozložení, spustí Grunt sestavení Jekyll.
- Jekyll také provozuje místní server.
- Sass je preprocesor CSS. Když se soubor Sass změní, spustí Grunt komplikaci Sass. Potom Grunt na výsledku spustí Autoprefixer. Poté Grunt znovu spustí sestavení Jekyll, aby se ujistil, že všechny nové věci jsou použitelné pro zpracovaný web.
- Web používá systém SVG. Pro ikony, ale také logo a kdo ví, co všechno na konci. Soubory SVG jsou uchovávány odděleně ve složce „svg“. Když se některý z nich změní, spustí Grunt úkol svgstore a všechny je zpracuje společně. Potom Grunt spustí sestavení Jekyll, takže na webu je k dispozici veškerý aktuální SVG.
- Protože se jedná o repo na GitHubu a stránky GitHub podporují Jekyll, můžeme automaticky získat živou hostovanou verzi tohoto webu. Na tento web můžeme také nasměrovat další doménu.