Προειδοποίηση: πρόκειται για μια μαζική, ενδιάμεση οθόνη screencast στην οποία εξετάζουμε τον κώδικα που τροφοδοτεί μια διαδικασία κατασκευής για έναν ιστότοπο. Δεν γράφουμε κανέναν κωδικό.
Μια "διαδικασία κατασκευής" είναι όλα τα πράγματα που συμβαίνουν μεταξύ του κώδικα που γράφετε και του κώδικα που μεταβαίνει σε μια ζωντανή ιστοσελίδα. Έχουμε μιλήσει στο παρελθόν για τη χρήση του Grunt για αυτό. Το Sass επεξεργάζεται, τα στοιχεία συνδυάζονται, η ελαχιστοποίηση και η βελτιστοποίηση συμβαίνουν κ.λπ. Υπάρχουν ατελείωτα πράγματα που μπορεί να κάνει μια διαδικασία κατασκευής για εσάς.
Δούλευα με την Katie Kovalcin για τη δημιουργία ενός νέου προσωπικού ιστότοπου για αυτήν. Είναι ένα πείραμα και για τους δυο μας στην εκμάθηση νέων διαδικασιών και στη δοκιμή νέων πραγμάτων. Σε αυτήν την περίπτωση, χρησιμοποιώ το Jekyll για πρώτη φορά και αυτοματοποιώ ένα σύστημα SVG για πρώτη φορά.
Κατά τη στιγμή του screencast, είμαι ακριβώς στη μέση όλων, αλλά έκανα το σύστημα κατασκευής να λειτουργεί ομαλά, έτσι σκέφτηκα ότι ήταν καλή στιγμή να το μοιραστώ. Πάντα πιστεύω ότι είναι μια καλή στιγμή για κοινή χρήση - ακριβώς τη στιγμή που κάτι σας κάνει κλικ.
Τα πράγματα συνεχίζονται:
- Ο Γκριντ εκτελεί όλες τις εργασίες.
- Ο ιστότοπος χτίζεται με τον Jekyll. Αυτό σημαίνει ότι επεξεργάζεται τις διατάξεις και το περιεχόμενο σε πλήρεις ιστοσελίδες. Όταν αλλάζει το περιεχόμενο ή η διάταξη, ο Grunt εκτελεί την κατασκευή Jekyll.
- Ο Jekyll εκτελεί επίσης τον τοπικό διακομιστή.
- Ο Sass είναι ο προεπεξεργαστής CSS. Όταν αλλάζει ένα αρχείο Sass, ο Grunt εκτελεί την επιπλοκή του Sass. Στη συνέχεια, ο Grunt τρέχει το Autoprefixer στο αποτέλεσμα. Στη συνέχεια, ο Grunt εκτελεί ξανά την κατασκευή Jekyll για να βεβαιωθεί ότι όλα τα νέα πράγματα μπορούν να χρησιμοποιηθούν από τον επεξεργασμένο ιστότοπο.
- Ο ιστότοπος χρησιμοποιεί ένα σύστημα SVG. Για εικονίδια, αλλά και το λογότυπο, και ποιος ξέρει τι άλλο μέχρι το τέλος του. Τα αρχεία SVG διατηρούνται όλα ξεχωριστά σε ένα φάκελο "svg". Όταν αλλάξει κάποιο από αυτά, ο Grunt εκτελεί την εργασία svgstore για να τα επεξεργαστεί όλα μαζί. Στη συνέχεια, ο Grunt εκτελεί την κατασκευή Jekyll έτσι ώστε όλο το τρέχον SVG να είναι διαθέσιμο στον ιστότοπο.
- Επειδή αυτό το repo στο GitHub και το GitHub Pages υποστηρίζουν το Jekyll, μπορούμε να λάβουμε αυτόματα μια ζωντανή, φιλοξενούμενη έκδοση αυτού του ιστότοπου. Μπορούμε επίσης να δείξουμε έναν άλλο τομέα σε αυτόν τον ιστότοπο.