Figyelmeztetés: ez egy kanyargós, középszintű képernyő, amelyben megnézzük a kódot, amely a webhely építési folyamatát hajtja végre. Nem írunk kódot.
A „felépítési folyamat” minden olyan dolog, ami az írott kód és az élő webhelyre kerülő kód között történik. Korábban már beszéltünk arról, hogy erre használjuk a Gruntot. A Sass feldolgozásra kerül, az eszközök kombinálódnak, a kicsinyítés és az optimalizálás megtörténik, stb. Végtelen sok dolog tehet az Ön számára.
Együtt dolgozom Katie Kovalcinnal egy új személyes oldal felépítésében. Ez egy kísérlet mindkettőnk számára új folyamatok elsajátításában és új dolgok kipróbálásában. Ebben az esetben először használom a Jekyll-t, és először automatizálok egy SVG-rendszert.
A vetítés idején mindennek a közepén vagyok, de a build-rendszert zavartalanul működtem, így arra gondoltam, hogy jó idő volt megosztani ezt. Mindig úgy gondolom, hogy ez a megfelelő alkalom a megosztásra - éppen abban a pillanatban, amikor valami kattintás az Ön számára.
Folyamatban lévő dolgok:
- Grunt futtatja az összes feladatot.
- A helyszínt Jekyll-nel építik. Ez azt jelenti, hogy az elrendezéseket és a tartalmat teljes weboldalakká dolgozza fel. Amikor a tartalom vagy az elrendezés megváltozik, Grunt futtatja a Jekyll összeállítást.
- Jekyll a helyi szervert is futtatja.
- Sass a CSS előfeldolgozó. Amikor egy Sass fájl megváltozik, a Grunt futtatja a Sass bonyodalmat. Ezután Grunt futtatja az Autoprefixert az eredményen. Ezután Grunt újra futtatja a Jekyll buildet, hogy megbizonyosodjon arról, hogy minden új anyag használható-e a feldolgozott helyen.
- A webhely SVG rendszert használ. Az ikonokért, de a logóért is, és ki-mit-mit-mást a végére. Az SVG fájlokat mind külön „svg” mappában tárolják. Amikor bármelyik megváltozik, Grunt futtatja az svgstore feladatot, hogy mindet együtt dolgozza fel. Ezután Grunt futtatja a Jekyll buildet, így az összes aktuális SVG elérhető a webhely számára.
- Mivel ez a GitHub repo és a GitHub Pages támogatja a Jekyll-et, automatikusan megszerezhetjük a webhely élő, tárolt változatát. Egy másik domaint is jelölhetünk ezen a webhelyen.