Upozorenje: ovo je vijugavi prijenos slike srednje razine u kojem gledamo kôd koji pokreće postupak izrade web mjesta. Ne pišemo nikakav kod.
"Postupak izrade" je sve ono što se događa između koda koji napišete i koda koji izlazi na aktivnu web stranicu. Već smo razgovarali o korištenju Grunta za ovo. Sass se obrađuje, imovina se kombinira, događa se minifikacija i optimizacija, itd. Postoje brojne stvari koje postupak gradnje može učiniti za vas.
Surađujem s Katie Kovalcin na izradi novog osobnog web mjesta za nju. To je eksperiment za oboje u učenju novih procesa i isprobavanju novih stvari. U ovom slučaju prvi put koristim Jekyll i prvi put automatiziram SVG sustav.
U vrijeme prikazivanja zaslona upravo sam usred svega toga, ali sustav gradnje je radio bez problema, pa sam zaključio da je pravo vrijeme da to podijelim. Uvijek mislim da je to dobro vrijeme za dijeljenje - upravo u trenutku kad nešto klikne za vas.
Stvari se događaju:
- Grunt izvodi sve zadatke.
- Stranica se gradi s Jekyllom. To znači da obrađuje izglede i sadržaj u pune web stranice. Kad se sadržaj ili izgled promijene, Grunt pokreće Jekyllovu gradnju.
- Jekyll također pokreće lokalni poslužitelj.
- Sass je CSS pretprocesor. Kad se datoteka Sass promijeni, Grunt pokreće komplikaciju Sass. Tada Grunt pokreće Autoprefixer na rezultatu. Tada Grunt ponovno pokreće Jekyll-ovu izgradnju kako bi bio siguran da sve nove stvari mogu biti korištene od strane obrađene stranice.
- Stranica koristi SVG sustav. Za ikone, ali i logotip, i tko zna-što-sve ostalo do kraja. SVG datoteke čuvaju se odvojeno u mapi "svg". Kad se bilo koji od njih promijeni, Grunt pokreće zadatak svgstore da ih sve zajedno obradi. Tada Grunt pokreće Jekyllovu verziju, tako da je svim trenutnim SVG-ima dostupna web stranica.
- Budući da ovo repo na GitHub-u i GitHub stranice podržavaju Jekyll, možemo automatski dobiti živu, hostiranu verziju ove stranice. Na ovu web lokaciju možemo uputiti i drugu domenu.