Upozornenie: toto je meandrovitý medzistupňový screencast, v ktorom sa pozeráme na kód, ktorý poháňa proces zostavovania webu. Nepíšeme žiadny kód.
„Proces vytvárania“ je všetko, čo sa deje medzi kódom, ktorý napíšete, a kódom, ktorý sa dostane na aktívny web. Už sme hovorili o použití Gruntu na toto použitie. Proces Sass sa spracováva, aktíva sa kombinujú, dochádza k minifikácii a optimalizácii atď. Proces zostavovania za vás môže urobiť nekonečné množstvo vecí.
Spolupracoval som s Katie Kovalcinovou na vytvorení novej osobnej stránky pre ňu. Je to experiment pre nás oboch pri učení sa novým procesom a skúšaní nových vecí. V tomto prípade používam Jekyll prvýkrát a prvýkrát automatizujem systém SVG.
V čase vysielania obrazovky som priamo uprostred všetkého, ale systém budovania som fungoval bez problémov, takže som si uvedomil, že je vhodný čas sa o to podeliť. Vždy si myslím, že je vhodný čas na zdieľanie - práve v okamihu, keď za vás niečo klikne.
Veci sa dejú:
- Grunt vykonáva všetky úlohy.
- Túto stránku stavia Jekyll. To znamená, že spracuje rozloženia a obsah na celé webové stránky. Keď sa zmení obsah alebo rozloženie, spustí Grunt zostavenie Jekyll.
- Jekyll tiež prevádzkuje lokálny server.
- Sass je preprocesorom CSS. Keď sa zmení súbor Sass, spustí Grunt komplikáciu Sass. Potom Grunt na výsledok spustí Autoprefixer. Potom Grunt znova spustí zostavenie Jekyll, aby sa ubezpečil, že všetky nové veci sú použiteľné pre spracované stránky.
- Stránka používa systém SVG. Na ikony, ale aj logo a na konci všetko, čo vie, čo všetko. Súbory SVG sa uchovávajú všetky oddelene v priečinku „svg“. Keď sa ktorákoľvek z nich zmení, Grunt spustí úlohu svgstore a spracuje ich všetky dohromady. Potom Grunt spustí zostavenie Jekyll, takže na webe je k dispozícii všetok aktuálny SVG.
- Pretože toto repo na GitHub a stránky GitHub podporujú Jekyll, môžeme automaticky získať živú hostovanú verziu tohto webu. Na túto stránku tiež môžeme nasmerovať inú doménu.