Предупреждение: это извилистый скринкаст среднего уровня, в котором мы смотрим на код, обеспечивающий процесс сборки сайта. Мы не пишем никакого кода.
«Процесс сборки» - это все, что происходит между кодом, который вы пишете, и кодом, который отправляется на действующий веб-сайт. Мы уже говорили об использовании для этого Grunt. Sass обрабатывается, ресурсы объединяются, происходит минификация и оптимизация и т. Д. Процесс сборки может сделать за вас бесконечное количество вещей.
Я работаю с Кэти Ковальчин над созданием для нее нового личного сайта. Для нас обоих это эксперимент по изучению новых процессов и испытанию нового. В данном случае я впервые использую Jekyll и впервые автоматизирую систему SVG.
Во время скринкаста я был прямо посреди всего этого, но у меня система сборки работала без сбоев, поэтому я решил, что сейчас хорошее время, чтобы поделиться этим. Я всегда думаю, что сейчас хорошее время, чтобы поделиться - прямо в тот момент, когда что-то щелкает для вас.
Что происходит:
- Grunt выполняет все задачи.
- Сайт создается с помощью Jekyll. Это означает, что он обрабатывает макеты и контент в полные веб-страницы. При изменении содержимого или макета Grunt запускает сборку Jekyll.
- Джекилл также запускает локальный сервер.
- Sass - это препроцессор CSS. Когда файл Sass изменяется, Grunt запускает усложнение Sass. Затем Grunt запускает Autoprefixer для результата. Затем Grunt снова запускает сборку Jekyll, чтобы убедиться, что обработанный сайт может использовать все новое.
- На сайте используется система SVG. Для значков, но также и для логотипа, и еще неизвестно чего в конце. Файлы SVG хранятся отдельно в папке «svg». При изменении любого из них Grunt запускает задачу svgstore, чтобы обработать их все вместе. Затем Grunt запускает сборку Jekyll, так что весь текущий SVG доступен для сайта.
- Поскольку это репо на GitHub, а страницы GitHub поддерживают Jekyll, мы можем автоматически получить живую размещенную версию этого сайта. Мы также можем указать другой домен на этом сайте.