Попередження: це звивистий скринкаст середнього рівня, в якому ми розглядаємо код, який забезпечує процес побудови сайту. Ми не пишемо жодного коду.
"Процес побудови" - це все, що відбувається між кодом, який ви пишете, та кодом, який надходить на активний веб-сайт. Ми вже говорили про використання Grunt для цього. Обробляється Sass, об’єднуються активи, відбувається мініфікація та оптимізація тощо. Процес побудови може зробити для вас нескінченні речі.
Я працюю з Кеті Ковальчин над створенням для неї нового персонального сайту. Це експеримент для нас обох у вивченні нових процесів та випробуванні нових речей. У цьому випадку я вперше використовую Jekyll і вперше автоматизую систему SVG.
На момент трансляції екрану я знаходився в центрі всього цього, але система збірки працювала безперебійно, тому я вважав, що зараз хороший час поділитися цим. Я завжди вважаю, що це гарний час поділитися - саме в той момент, коли щось натискає на вас.
Що відбувається:
- Грунт виконує всі завдання.
- Сайт будується разом із Jekyll. Це означає, що він обробляє макети та вміст на цілі веб-сторінки. При зміні вмісту або макета Грунт запускає збірку Jekyll.
- Jekyll також запускає локальний сервер.
- Sass - це препроцесор CSS. Коли файл Sass змінюється, Grunt запускає ускладнення Sass. Потім Grunt запускає Autoprefixer на результаті. Потім Грунт знову запускає збірку Jekyll, щоб переконатися, що всі нові речі використовуються обробленим сайтом.
- Сайт використовує систему SVG. Що стосується піктограм, але також логотипу, і хто знає-що-все ще до кінця. Файли SVG зберігаються окремо в папці “svg”. Коли будь-який з них змінюється, Grunt запускає завдання svgstore, щоб обробити їх усі разом. Потім Грунт запускає збірку Jekyll, щоб весь поточний SVG був доступний на сайті.
- Оскільки це репо на GitHub і GitHub Pages підтримують Jekyll, ми можемо автоматично отримати поточну версію цього сайту. Ми також можемо вказати інший домен на цьому сайті.