Attenzione: questo è uno screencast tortuoso di livello intermedio in cui guardiamo il codice che alimenta un processo di compilazione per un sito. Non scriviamo alcun codice.
Un "processo di compilazione" è tutto ciò che accade tra il codice che scrivi e il codice che esce su un sito web live. Abbiamo già parlato dell'utilizzo di Grunt per questo. Sass viene elaborato, le risorse vengono combinate, la minimizzazione e l'ottimizzazione vengono eseguite, ecc. Ci sono infinite cose che un processo di compilazione può fare per te.
Ho lavorato con Katie Kovalcin per creare un nuovo sito personale per lei. È un esperimento per entrambi per imparare nuovi processi e provare nuove cose. In questo caso, utilizzo Jekyll per la prima volta e per la prima volta automatizzo un sistema SVG.
Al momento dello screencast, ero nel bel mezzo di tutto, ma il sistema di compilazione funzionava senza problemi, quindi ho pensato che fosse un buon momento per condividerlo. Penso sempre che sia un buon momento per condividere, proprio nel momento in cui qualcosa fa clic per te.
Cose da fare:
- Grunt esegue tutte le attività.
- Il sito è in costruzione con Jekyll. Significa che elabora i layout e il contenuto in pagine web complete. Quando il contenuto o il layout cambiano, Grunt esegue la build Jekyll.
- Jekyll esegue anche il server locale.
- Sass è il preprocessore CSS. Quando un file Sass cambia, Grunt esegue la complicazione Sass. Quindi Grunt esegue Autoprefixer sul risultato. Quindi Grunt esegue nuovamente la build di Jekyll per assicurarsi che tutto il nuovo materiale sia utilizzabile dal sito elaborato.
- Il sito utilizza un sistema SVG. Per le icone, ma anche per il logo e chissà cos'altro alla fine. I file SVG vengono tenuti tutti separati in una cartella "svg". Quando qualcuno di loro cambia, Grunt esegue l'attività svgstore per elaborarli tutti insieme. Quindi Grunt esegue la build Jekyll in modo che tutto l'SVG corrente sia disponibile per il sito.
- Poiché si tratta di un repository su GitHub e le pagine GitHub supportano Jekyll, possiamo ottenere automaticamente una versione live ospitata di questo sito. Possiamo anche indicare un altro dominio in questo sito.