Новый динамический стартер Hugo — установка Hugo Pipes с Parcel.
Обратите внимание, что этот репозиторий предназначен только для демонстрации конвейера активов и не считается полноценным начальным вариантом. Делайте с этим как хотите, но имейте в виду, что здесь все рассчитано на наш внутренний рабочий процесс.
Мы используем журнал изменений во всех наших проектах. Пожалуйста, смотрите этот файл для обновлений.
инструменты
- Hugo — платформа веб-сайтов общего назначения, написанная на Go, которая генерирует статические веб-страницы.
- Parcel — невероятно быстрый сборщик веб-приложений без необходимости настройки.
- ПостCSS | TailwindsCSS (библиотека CSS-классов на основе JS) | PurgeCSS (удаляет неиспользуемый CSS)
- KyleAMathews/шрифты (загружайте шрифты ОС локально с помощью одного небольшого
require )
Трубопровод Хьюго Ассет
В этой настройке используется Parcel для обработки Javascript и шрифтов с открытым исходным кодом, Hugo Pipes + PostCSS для обработки CSS и npm-run-all для параллельного запуска Parcel и Hugo (см. примечание ниже). Мы используем менеджер пакетов Yarn, но вы можете использовать NPM, если хотите.
Этот конвейер ресурсов — это переход от использования Webpack к обработке JS/Fonts/CSS. Parcel — это сборщик пакетов, подобный Webpack, однако в качестве компромисса за несколько меньшую гибкость он имеет меньшую конфигурацию и размер файла, а также быстрее компонуется; на самом деле файла конфигурации Parcel нет. Переход к использованию Hugo для создания CSS позволяет разрабатывать сайты Hugo вне процесса внешней сборки. У этого подхода есть недостатки, которые описаны ниже.
Примечания:
- Эта конфигурация построена на предположении, что JS/шрифты обрабатываются в процессе разработки, а не в производстве, хотя для этого потребуется минимальное усилие.
- Скрипты в
package.json включают загрузку переменных среды с помощью cross-env , что является необязательным для некоторых систем (кроме Windows) и может быть безопасно удалено. Просто замените cross-env NODE_ENV=development на NODE_ENV=development
JS
- Использует Parcel Bundler.
- Вывод посылки в
assets/output/index.js . - Хьюго используется для снятия отпечатков пальцев и создания безопасного хэша для целостности подресурса.
- Если
fileExists "./assets/output/index.js Хьюго создает хэш этого файла из layouts/_head/scripts.html .
- Хьюго выводит обработанный файл JS в
public/output/index.min.[hash].js .
CSS
Использует Hugo Pipes и PostCSS. ПРИМЕЧАНИЕ. Мы используем этот метод, потому что используем CSS служебного класса. В противном случае я рекомендую вам использовать Parcel для обработки вашего CSS. См. «Как переключиться на использование PostCSS на основе JS» ниже.- По умолчанию использует Parcel/PostCSS. См. «Как переключиться на PostCSS на основе Hugo» ниже.
CSS через Хьюго
- Хьюго обрабатывает
assets/css/styles.css с помощью assets/postcss.config.js , используя Imports, TailwindCSS, Autoprefixer и PurgeCSS. - Если в команде сборки присутствует
NODE_ENV=development , PostCSS НЕ будет обрабатывать файл через PurgeCSS. - Хьюго выводит обработанный файл CSS в
public/css/styles.min.[hash].css .
CSS через посылку
- Parcel обрабатывает
assets/css/styles.css с помощью assets/postcss.config.js , используя Imports, TailwindCSS, Autoprefixer и PurgeCSS. - Если в команде сборки присутствует
NODE_ENV=development , PostCSS НЕ будет обрабатывать файл через PurgeCSS. - Хьюго выводит обработанный файл CSS в
assets/output/index.[hash].css .
Шрифты
- Шрифты с открытым исходным кодом через Typefaces используют Parcel Bundler.
- Parcel выводит CSS в
assets/output/index.css , а также помещает хешированные файлы шрифтов в тот же каталог. - Хьюго Пайпс обрабатывает файлы в общедоступном каталоге и создает ссылки предварительной выборки.
- Если
fileExists "./assets/output/index.css Хьюго создает ссылки предварительной выборки из layouts/_head/stylesheets.html .
- Хьюго выводит обработанные шрифты и файл CSS в
public/output/index.min.[hash].css и public/output/font-name.[hash].woff[2] .
Изображения
- Активы, хранящиеся в корзине S3 или локально в репозитории, преобразованные с помощью Imgix.
TODO
- Учитывайте ресурсы в _header для кэширования и предварительной загрузки (приемлема ли Scratch).
- Убедитесь, что наши команды package.json настроены правильно.
- Определите рабочий процесс для управления шрифтами, которые не вызываются в пакете typography (т. е. коммерческими шрифтами).
Плюсы и минусы использования Hugo для обработки PostCSS
Плюсы
- Не нужно запускать JS для изменения CSS, что исключает несоответствие времени при создании CSS.
- Обновления разрабатываются быстрее.
минусы
- Необходимо установить модули Node только для запуска Hugo.
- Необходимо запустить PostCSS (с модулями Node) для создания рабочей среды на сервере, создавая CSS при каждом изменении.
- Создает отдельный файл CSS для основных стилей отдельно от файлов CSS, созданных для шрифтов.
Как переключиться на использование PostCSS на основе Hugo
- Удалите основной файл CSS в
assets/index.js . - Измените импорт Tailwind так, чтобы он вызывал Tailwind через @import, а не напрямую.
- Измените исходный файл CSS
layouts/_head/stylesheets.html чтобы использовать Hugo (см. комментарии в этом файле).
