Opozorilo: gre za vijugast vmesni zaslon zaslona, v katerem si ogledujemo kodo, ki poganja postopek gradnje spletnega mesta. Ne napišemo nobene kode.
"Postopek izdelave" je vse tisto, kar se zgodi med kodo, ki jo napišete, in kodo, ki gre na spletno mesto v živo. Že prej smo govorili o uporabi Grunta za to. Sass se obdela, sredstva se kombinirajo, zgodi se minifikacija in optimizacija itd. Postopek gradnje lahko stori za vas neskončno.
S Katie Kovalcin sodelujem pri ustvarjanju novega osebnega spletnega mesta zanjo. To je poskus za oba pri učenju novih procesov in preizkušanju novih stvari. V tem primeru prvič uporabljam Jekyll in prvič avtomatiziram sistem SVG.
V času predvajanja zaslona sem ravno sredi vsega, vendar je sistem za gradnjo deloval nemoteno, zato sem mislil, da je pravi čas, da to povem. Vedno mislim, da je primeren čas za skupno rabo - ravno v trenutku, ko vas nekaj klikne.
Stvari se dogajajo:
- Grunt izvaja vse naloge.
- Spletno mesto gradi skupaj z Jekyllom. To pomeni, da obdeluje postavitve in vsebino v celotne spletne strani. Ko se vsebina ali postavitev spremeni, Grunt zažene gradnjo Jekyll.
- Jekyll vodi tudi lokalni strežnik.
- Sass je predprocesor CSS. Ko se datoteka Sass spremeni, Grunt zažene zaplet Sass. Nato Grunt na rezultatu zažene Autoprefixer. Nato Grunt znova zažene zgradbo Jekyll, da se prepriča, ali je obdelano spletno mesto uporabno za vse nove stvari.
- Spletno mesto uporablja sistem SVG. Za ikone, pa tudi logotip in kdo ve, kaj vse do konca. Datoteke SVG se hranijo ločeno v mapi »svg«. Ko se kateri od njih spremeni, Grunt zažene nalogo svgstore, da jih vse skupaj obdela. Nato Grunt zažene gradnjo Jekyll, tako da je spletnemu mestu na voljo ves trenutni SVG.
- Ker to repo na GitHub in GitHub Pages podpirata Jekyll, lahko samodejno dobimo gostovano različico tega spletnega mesta. Na to spletno mesto lahko usmerimo tudi drugo domeno.