Hoiatus: see on käänuline kesktaseme ekraanikuva, kus vaatame koodi, mis juhib saidi loomise protsessi. Me ei kirjuta ühtegi koodi.
Ehitamisprotsess on kõik asjad, mis juhtuvad teie kirjutatud koodi ja veebisaidile suunatava koodi vahel. Oleme varem rääkinud Grunti kasutamisest selle jaoks. Sassi töödeldakse, varad kombineeritakse, toimub minimeerimine ja optimeerimine jne. Koostamisprotsess võib teie jaoks teha lõputult.
Olen töötanud koos Katie Kovalciniga talle uue isikliku saidi loomisel. See on mõlema jaoks eksperiment uute protsesside õppimiseks ja uute asjade proovimiseks. Sellisel juhul kasutan Jekyll esimest korda ja esmakordselt automatiseerin SVG-süsteemi.
Ekraanikuva ajal olen ma selle kõige keskel, kuid ehituskonstruktsioonide süsteem toimis tõrgeteta, nii et arvasin, et on hea aeg seda jagada. Ma arvan alati, et on hea aeg jagada - just sel hetkel, kui midagi teie jaoks klõpsab.
Toimuvad asjad:
- Grunt ajab kõik ülesanded.
- Saiti ehitatakse Jekylliga. See tähendab, et see töötleb paigutusi ja sisu täisveebilehtedeks. Kui sisu või küljendus muutub, käivitab Grunt Jekyll'i järgu.
- Jekyll juhib ka kohalikku serverit.
- Sass on CSS-i eeltöötleja. Kui Sass-fail muutub, käivitab Grunt Sassi tüsistuse. Seejärel käivitab Grunt tulemuse Autoprefixeri. Seejärel käivitab Grunt Jekylli ehituse uuesti, veendumaks, et kogu uus kraam on töödeldud saidil kasutatav.
- Sait kasutab SVG-süsteemi. Ikoonide jaoks, aga ka logo ja kes-teab-mida-kõike muud selle lõpuks. SVG-failid hoitakse kõik eraldi kaustas “svg”. Kui mõni neist muutub, käivitab Grunt svgstore'i ülesande, et neid kõiki koos töödelda. Seejärel käivitab Grunt Jekyll'i ehituse, nii et kogu praegune SVG on saidile saadaval.
- Kuna see GitHubi repo ja GitHubi lehed toetavad Jekylli, saame automaatselt selle saidi reaalajas hostitud versiooni. Saame sellele saidile suunata ka teise domeeni.