Warnung: Dies ist ein mäandrierender Screencast auf mittlerer Ebene, in dem wir uns den Code ansehen, der einen Erstellungsprozess für eine Site antreibt. Wir schreiben keinen Code.
Ein „Erstellungsprozess“ ist alles, was zwischen dem von Ihnen geschriebenen Code und dem Code passiert, der an eine Live-Website gesendet wird. Wir haben bereits darüber gesprochen, Grunt dafür zu verwenden. Sass wird verarbeitet, Assets werden kombiniert, Minimierung und Optimierung werden durchgeführt usw. Es gibt endlose Dinge, die ein Build-Prozess für Sie tun kann.
Ich habe mit Katie Kovalcin daran gearbeitet, eine neue persönliche Website für sie zu erstellen. Es ist für uns beide ein Experiment, neue Prozesse zu lernen und neue Dinge auszuprobieren. In diesem Fall verwende ich Jekyll zum ersten Mal und automatisiere zum ersten Mal ein SVG-System.
Zum Zeitpunkt des Screencasts bin ich mittendrin, aber das Build-System funktioniert reibungslos, sodass ich dachte, es wäre ein guter Zeitpunkt, dies zu teilen. Ich denke immer, dass dies ein guter Zeitpunkt zum Teilen ist - genau in dem Moment, in dem etwas für Sie klickt.
Dinge los:
- Grunt führt alle Aufgaben aus.
- Die Seite wird mit Jekyll gebaut. Das heißt, es verarbeitet die Layouts und Inhalte zu vollständigen Webseiten. Wenn sich Inhalt oder Layout ändern, führt Grunt den Jekyll-Build aus.
- Jekyll führt auch den lokalen Server aus.
- Sass ist der CSS-Präprozessor. Wenn sich eine Sass-Datei ändert, führt Grunt die Sass-Komplikation aus. Dann führt Grunt Autoprefixer für das Ergebnis aus. Dann führt Grunt den Jekyll-Build erneut aus, um sicherzustellen, dass alle neuen Inhalte von der verarbeiteten Site verwendet werden können.
- Die Site verwendet ein SVG-System. Für Symbole, aber auch für das Logo und wer weiß was noch alles am Ende. Die SVG-Dateien werden alle getrennt in einem "svg" -Ordner aufbewahrt. Wenn sich einer von ihnen ändert, führt Grunt die Aufgabe svgstore aus, um sie alle zusammen zu verarbeiten. Dann führt Grunt den Jekyll-Build aus, sodass die gesamte aktuelle SVG für die Site verfügbar ist.
- Da dies ein Repo auf GitHub ist und GitHub Pages Jekyll unterstützen, können wir automatisch eine gehostete Live-Version dieser Site erhalten. Wir können auch eine andere Domain auf diese Site verweisen.