Atenție: acesta este un screencast de nivel intermediar, în care ne uităm la codul care alimentează un proces de construcție pentru un site. Nu scriem niciun cod.
Un „proces de construire” este tot ceea ce se întâmplă între codul pe care îl scrieți și codul care trece pe un site web live. Am mai vorbit despre utilizarea lui Grunt pentru asta. Sass este procesat, activele sunt combinate, se întâmplă reducerea și optimizarea etc. Există un număr infinit de lucruri pe care un proces de construcție le poate face pentru dvs.
Am lucrat cu Katie Kovalcin la construirea unui nou site personal pentru ea. Este un experiment pentru amândoi în a învăța noi procese și a încerca lucruri noi. În acest caz, folosesc Jekyll pentru prima dată și automatizez un sistem SVG pentru prima dată.
În momentul difuzării ecranului, mă aflu chiar în mijlocul tuturor, dar am reușit ca sistemul de construcție să funcționeze fără probleme, așa că m-am gândit că este un moment bun să împărtășesc asta. Întotdeauna cred că acesta este un moment bun de împărtășit - chiar în momentul în care ceva face clic pentru tine.
Lucrurile se întâmplă:
- Grunt execută toate sarcinile.
- Site-ul este construit cu Jekyll. Adică procesează aspectele și conținutul în pagini web complete. Când conținutul sau aspectul se schimbă, Grunt rulează versiunea Jekyll.
- Jekyll rulează și serverul local.
- Sass este preprocesorul CSS. Când se modifică un fișier Sass, Grunt execută complicația Sass. Apoi Grunt rulează Autoprefixer pe rezultat. Apoi, Grunt rulează din nou construcția Jekyll pentru a se asigura că toate lucrurile noi pot fi utilizate de site-ul procesat.
- Site-ul folosește un sistem SVG. Pentru pictograme, dar și sigla și cine-știe-ce-orice altceva până la sfârșitul acesteia. Fișierele SVG sunt păstrate toate separate într-un folder „svg”. Când oricare dintre ele se schimbă, Grunt rulează sarcina svgstore pentru a le procesa pe toate împreună. Apoi Grunt rulează versiunea Jekyll, astfel încât toate SVG-urile actuale să fie disponibile site-ului.
- Deoarece aceasta este o repo pe GitHub și GitHub Pages acceptă Jekyll, putem obține automat o versiune găzduită live a acestui site. De asemenea, putem indica un alt domeniu către acest site.