hugo pipes parcel

O novo Dynamic Hugo Starter - Hugo Pipes Setup com Parcel.

Observe que este repo se preocupa apenas em demonstrar um pipeline de ativos e não é considerado um início completo. Faça como quiser, mas lembre-se que tudo aqui foi pensado para o nosso fluxo de trabalho interno.

Usamos um Changelog em todos os nossos projetos. Por favor, veja esse arquivo para atualizações.

ferramentas

• Hugo – Uma estrutura de site de uso geral – escrita em Go – que gera páginas estáticas.
• Parcel - Um empacotador de aplicativos da web "extremamente rápido" e com configuração zero.
• PósCSS | TailwindsCSS (biblioteca de classes CSS baseadas em JS) | PurgeCSS (remove CSS não utilizado)
• KyleAMathews/typefaces (carregar fontes do sistema operacional localmente com um pequeno require )

Hugo Asset Pipline

Esta configuração utiliza Parcel para Javascript e processamento de fontes de código aberto, Hugo Pipes + PostCSS para processamento CSS e npm-run-all para executar Parcel e Hugo em paralelo (veja a nota abaixo). Usamos o gerenciador de pacotes Yarn, mas você pode usar o NPM se quiser.

Este pipeline de ativos é uma mudança para nós do uso do Webpack para processar JS/Fonts/CSS. Parcel é um empacotador como o Webpack, mas em troca de um pouco menos de flexibilidade, ele tem uma configuração e espaço de arquivo menores e é construído mais rapidamente; na verdade, não há arquivo de configuração do Parcel. A mudança para o uso do Hugo para construir CSS permite que os sites do Hugo sejam desenvolvidos fora de um processo de construção externo. Existem desvantagens nesta abordagem, conforme descrito abaixo.

Notas:

• Essa configuração é construída em torno da suposição de que JS/Fonts são processados ​​no desenvolvimento, não na produção, embora isso exija um esforço mínimo.
• Os scripts em package.json incluem o carregamento de variáveis ​​de ambiente com cross-env , que é opcional para alguns sistemas (não Windows) e pode ser removido com segurança. Basta substituir cross-env NODE_ENV=development por NODE_ENV=development

JS

• Usa pacote de pacotes.
• Parcelar saídas para assets/output/index.js .
• Hugo está acostumado a imprimir impressões digitais e criar um hash seguro para Subresource Integrity.
  • Se fileExists "./assets/output/index.js Hugo cria um hash desse arquivo em layouts/_head/scripts.html .
• Hugo gera o arquivo JS processado para public/output/index.min.[hash].js .

CSS

• Utiliza Hugo Pipes, utilizando PostCSS. NOTA: usamos este método porque usamos CSS de classe utilitária. Caso contrário, recomendo que você use o Parcel para processar seu CSS. Consulte "Como mudar para a execução de PostCSS baseado em JS" abaixo.
• Usa Parcel/PostCSS como padrão. Consulte "Como mudar para PostCSS baseado em Hugo" abaixo.

CSS via Hugo

• Hugo processa assets/css/styles.css com assets/postcss.config.js , utilizando Imports, TailwindCSS, Autoprefixer e PurgeCSS.
• Se NODE_ENV=development estiver presente no comando de construção, o PostCSS NÃO processará o arquivo por meio do PurgeCSS.
• Hugo gera o arquivo CSS processado para public/css/styles.min.[hash].css .

CSS via pacote

• O Parcel processa assets/css/styles.css com assets/postcss.config.js , utilizando Imports, TailwindCSS, Autoprefixer e PurgeCSS.
• Se NODE_ENV=development estiver presente no comando de construção, o PostCSS NÃO processará o arquivo por meio do PurgeCSS.
• Hugo envia o arquivo CSS processado para assets/output/index.[hash].css .

Fontes

• Fontes de código aberto via Typefaces usam Parcel Bundler.
• Parcel gera CSS para assets/output/index.css e também coloca os arquivos de fonte, com hash, no mesmo diretório.
• Hugo Pipes processa arquivos em diretório público e cria links de pré-busca.
  • Se fileExists "./assets/output/index.css Hugo cria os links de pré-busca em layouts/_head/stylesheets.html .
• Hugo gera as fontes processadas e o arquivo CSS para public/output/index.min.[hash].css e public/output/font-name.[hash].woff[2] .

Imagens

• Ativos armazenados em um bucket S3 ou localmente no repo, transformados via Imgix.

PENDÊNCIA

• Considere os recursos em _header para armazenamento em cache e pré-carregamento (o Scratch é viável).
• Certifique-se de que nossos comandos package.json estejam bem configurados.
• Determine o fluxo de trabalho para gerenciar fontes que não são chamadas com o pacote typogpraphy (ou seja, fontes comerciais).

Prós e contras de usar Hugo para processar PostCSS

Prós

• Não é necessário executar JS para alterar o CSS, eliminando incompatibilidade de tempo durante a construção do CSS.
• As atualizações são mais rápidas no desenvolvimento.

contras

• Deve instalar os módulos do Node apenas para executar o Hugo.
• Deve executar PostCSS (com módulos Node) para construir em produção no servidor, construindo CSS a cada mudança.
• Cria um arquivo CSS separado para estilos principais, além de quaisquer arquivos CSS gerados para fontes.

Como mudar para a execução de PostCSS baseado em Hugo

• Remova o arquivo CSS principal para assets/index.js .
• Altere as importações do Tailwind para chamar o tailwind via @import, em vez de diretamente.
• Altere o arquivo CSS inicial layouts/_head/stylesheets.html para usar o Hugo (veja os comentários nesse arquivo).