Ostrzeżenie: jest to meandrujący screencast na średnim poziomie, w którym przyglądamy się kodowi, który napędza proces budowania witryny. Nie piszemy żadnego kodu.
„Proces budowania” to wszystko, co dzieje się między napisanym kodem a kodem, który trafia do działającej witryny internetowej. Rozmawialiśmy wcześniej o używaniu do tego Grunta. Sass jest przetwarzany, zasoby są łączone, następuje minifikacja i optymalizacja itp. Proces kompilacji może zrobić za Ciebie nieskończenie wiele rzeczy.
Pracowałem z Katie Kovalcin nad stworzeniem dla niej nowej, osobistej strony internetowej. To eksperyment dla nas obu, polegający na nauce nowych procesów i wypróbowywaniu nowych rzeczy. W tym przypadku używam Jekyll po raz pierwszy i po raz pierwszy automatyzuję system SVG.
W momencie wyświetlania ekranu jestem w środku tego wszystkiego, ale system kompilacji działał płynnie, więc pomyślałem, że to dobry czas, aby się tym podzielić. Zawsze uważam, że to dobry moment na udostępnienie - właśnie w momencie, gdy coś dla Ciebie klika.
Co się dzieje:
- Grunt wykonuje wszystkie zadania.
- Strona jest budowana z Jekyll. Oznacza to, że przetwarza układy i zawartość w pełne strony internetowe. Gdy zawartość lub układ ulegną zmianie, Grunt uruchamia kompilację Jekyll.
- Jekyll obsługuje również serwer lokalny.
- Sass jest preprocesorem CSS. Gdy plik Sass się zmienia, Grunt uruchamia komplikację Sass. Następnie Grunt uruchamia Autoprefixer na wyniku. Następnie Grunt ponownie uruchamia kompilację Jekyll, aby upewnić się, że wszystkie nowe elementy mogą być używane przez przetworzoną witrynę.
- Witryna korzysta z systemu SVG. Dla ikon, ale także logo i nie wiadomo co na końcu. Pliki SVG są przechowywane osobno w folderze „svg”. Kiedy którykolwiek z nich się zmieni, Grunt uruchamia zadanie svgstore, aby przetworzyć je wszystkie razem. Następnie Grunt uruchamia kompilację Jekyll, dzięki czemu wszystkie aktualne pliki SVG są dostępne na stronie.
- Ponieważ jest to repozytorium w serwisie GitHub, a strony GitHub obsługują Jekyll, możemy automatycznie uzyskać aktywną, hostowaną wersję tej witryny. W tej witrynie możemy również wskazać inną domenę.