hugo pipes parcel

El nuevo iniciador dinámico de Hugo: configuración de Hugo Pipes con Parcel.

Tenga en cuenta que este repositorio solo se ocupa de demostrar una cartera de activos y no se considera un inicio completo. Hazlo como quieras, pero ten en cuenta que todo aquí está diseñado para nuestro flujo de trabajo interno.

Usamos un registro de cambios en todos nuestros proyectos. Consulte ese archivo para obtener actualizaciones.

herramientas

• Hugo: un marco de trabajo para sitios web de propósito general, escrito en Go, que genera páginas web estáticas.
• Parcel: un paquete de aplicaciones web increíblemente rápido y sin configuración.
• PublicarCSS | TailwindsCSS (biblioteca de clases CSS basadas en JS) | PurgeCSS (elimina CSS no utilizado)
• KyleAMathews/tipos de letra (carga fuentes del sistema operativo localmente con un pequeño require )

Canalización de activos de Hugo

Esta configuración utiliza Parcel para Javascript y procesamiento de fuentes de código abierto, Hugo Pipes + PostCSS para procesamiento de CSS y npm-run-all para ejecutar Parcel y Hugo en paralelo (consulte la nota a continuación). Usamos el administrador de paquetes Yarn, pero puedes usar NPM si lo deseas.

Esta canalización de activos es un cambio para nosotros desde el uso de Webpack para procesar JS/Fonts/CSS. Parcel es un paquete como Webpack, pero como compensación por una flexibilidad ligeramente menor, tiene una configuración y un espacio de archivo más pequeños y se compila más rápido; de hecho, no existe ningún archivo de configuración de Parcel. El cambio al uso de Hugo para crear CSS permite que los sitios de Hugo se desarrollen fuera de un proceso de construcción externo. Este enfoque tiene desventajas, como se describe a continuación.

Notas:

• Esta configuración se basa en la suposición de que JS/Fonts se procesan en desarrollo, no en producción, aunque requeriría un esfuerzo mínimo para hacerlo.
• Los scripts en package.json incluyen la carga de variables de entorno con cross-env , que es opcional para algunos sistemas (no Windows) y se puede eliminar de forma segura. Simplemente reemplace cross-env NODE_ENV=development con NODE_ENV=development

js

• Utiliza paqueter de paquetes.
• Parcela las salidas en assets/output/index.js .
• Hugo se utiliza para tomar huellas digitales y crear un hash seguro para Subresource Integrity.
  • Si fileExists "./assets/output/index.js Hugo crea un hash de ese archivo desde layouts/_head/scripts.html .
• Hugo envía el archivo JS procesado a public/output/index.min.[hash].js .

CSS

• Utiliza Hugo Pipes, utilizando PostCSS. NOTA: utilizamos este método porque utilizamos CSS de clase de utilidad. De lo contrario, te recomiendo que uses Parcel para procesar tu CSS. Consulte "Cómo cambiar a la ejecución de PostCSS basado en JS" a continuación.
• Utiliza Parcel/PostCSS por defecto. Consulte "Cómo cambiar a PostCSS basado en Hugo" a continuación.

CSS a través de Hugo

• Hugo procesa assets/css/styles.css con assets/postcss.config.js , utilizando Imports, TailwindCSS, Autoprefixer y PurgeCSS.
• Si NODE_ENV=development está presente en el comando de compilación, PostCSS NO procesará el archivo a través de PurgeCSS.
• Hugo envía el archivo CSS procesado a public/css/styles.min.[hash].css .

CSS a través de parcela

• Parcel procesa assets/css/styles.css con assets/postcss.config.js , utilizando Imports, TailwindCSS, Autoprefixer y PurgeCSS.
• Si NODE_ENV=development está presente en el comando de compilación, PostCSS NO procesará el archivo a través de PurgeCSS.
• Hugo envía el archivo CSS procesado a assets/output/index.[hash].css .

Fuentes

• Las fuentes de código abierto a través de Typefaces utilizan Parcel Bundler.
• Parcel genera CSS en assets/output/index.css y también coloca los archivos de fuentes, con hash, en el mismo directorio.
• Hugo Pipes procesa archivos en un directorio público y crea enlaces de captación previa.
  • Si fileExists "./assets/output/index.css Hugo crea los enlaces de captación previa desde layouts/_head/stylesheets.html .
• Hugo envía las fuentes procesadas y el archivo CSS a public/output/index.min.[hash].css y public/output/font-name.[hash].woff[2] .

Imágenes

• Activos almacenados en un depósito S3 o local en el repositorio, transformados a través de Imgix.

HACER

• Cuenta de recursos en _header para almacenamiento en caché y precarga (es viable en Scratch).
• Asegúrese de que nuestros comandos package.json estén bien configurados.
• Determine el flujo de trabajo para administrar fuentes que no se llaman con el paquete typogpraphy (es decir, fuentes comerciales).

Pros y contras de usar Hugo para procesar PostCSS

Ventajas

• No es necesario ejecutar JS para cambiar CSS, lo que elimina la falta de coincidencia en el tiempo al crear CSS.
• Las actualizaciones son más rápidas en desarrollo.

contras

• Debe instalar los módulos de Node solo para ejecutar Hugo.
• Debe ejecutar PostCSS (con módulos de Node) para incorporar la producción en el servidor, creando CSS con cada cambio.
• Crea un archivo CSS separado para los estilos principales además de cualquier archivo CSS generado para las fuentes.

Cómo pasar a ejecutar PostCSS basado en Hugo

• Elimine el archivo CSS principal a assets/index.js .
• Cambie las importaciones de Tailwind para llamar a tailwind a través de @import, en lugar de hacerlo directamente.
• Cambie layouts/_head/stylesheets.html para usar Hugo (vea los comentarios en ese archivo).