Hacer que mi Netlify Build funcione con descargar

Supongamos que deseamos crear un sitio con Eleventy como generador. ¡Elección popular en estos días! Eleventy no tiene una forma particularmente bendita de preprocesar tu CSS, si eso es algo que quieres hacer. Hay variedad de formas de hacerlo y quizás esa libertad sea parte del espíritu de Eleventy.

He visto gente configurar Gulp para esto, lo cual es genial, todavía uso y me gusta Gulp para algunas cosas. He visto a alguien usar plantillas para devolver CSS preprocesado, lo que parece extraño, pero bueno, lo que sea que funcione. Incluso he visto a alguien ampliar la configuración de Eleventy para ejecutar el procesamiento.

Hasta ahora, lo que ha tenido más sentido para mí es utilizar scripts npm para realizar el procesamiento Sass. Primero haga el CSS, luego el HTML, con npm-run-all. Entonces, configurarías algo como esto en tu package.json:

  "scripts": {    "build": "npm-run-all build:css build:html",    "build:css": "node-sass src/site/_includes/css/main.scss  src/site/css/main.css",    "build:html": "eleventy",    "watch": "npm-run-all --parallel watch:css watch:html",    "watch:css": "node-sass --watch src/site/_includes/css/main.scss  src/site/css/main.css",    "watch:html": "eleventy --serve --port=8181",    "start": "npm run watch"  },

Creo que eso es bastante bueno. Dado que Eleventy no tiene una ruta de procesamiento CSS bendecida de todos modos, se siente bien tenerla desacoplada del procesamiento de Eleventy.

Pero veo que Netlify ha funcionado muy bien con sus complementos de compilación. Como dijo Sara:

Lo que hace el complemento de compilación es brindarle acceso a puntos clave en el tiempo durante ese proceso, por ejemplo, onPreBuild, onPostBuild, onSuccessetc. Puedes ejecutar algo de lógica en esos momentos específicos

Hay algo realmente intuitivo y agradable en esa estructura. Muchos complementos de compilación son creados por la comunidad o por los propios Netlify. Simplemente haga clic en ellos a través de la interfaz de usuario o haga referencia a ellos en su configuración. Pero Sass no es un proyecto integrado (mientras escribe), lo que supongo que se debe a que las personas son bastante obstinadas sobre qué/dónde/cómo se procesa su CSS, por lo que tiene sentido dejar que las personas lo hagan por sí mismas . Así que hagamos eso.

En nuestro proyecto, crearíamos un directorio para nuestros complementos y luego una carpeta para este complemento en particular que queremos escribir:

project-root/  src/  whatever/  plugins/    sass/      index.js      manifest.yml  

Ese index.jsarchivo es donde escribimos nuestro código, y específicamente queremos usar el onPreBuildgancho aquí, porque queremos que nuestro Sass termine de preprocesarse antes de que el proceso de compilación Eleventy y Eleventy mueva las cosas.

module.exports = {  onPreBuild: async ({ utils: { run } }) = {    await run.command(      "node-sass src/site/_includes/css/main.scss src/site/css/main.css"    );  },};

Aquí hay un vistazo a todos los archivos relevantes juntos:

Ahora, si lo hago netlify builddesde la línea de comando, ejecutará el mismo proceso de compilación que realiza Netlify, se conectará a mi complemento y lo ejecutará.

Una pequeña cosa que noté es que estaba intentando que mi configuración tuviera el netlify.ymlformato (más nuevo), pero los complementos no funcionaron y tuve que volver a hacer la configuración como netlify.toml.

Así que nos desacoplamos de Eleventy con este procesamiento en particular y nos acoplamos a Netlify. Sólo algo a tener en cuenta. Estoy de acuerdo con eso porque esta forma de configurar una compilación es muy agradable y veo mucho potencial en ella.

Prefiero la configuración más explícita y fragmentada de este estilo. Solo mire lo limpio que package.jsonse vuelve:

Todavía tengo esta idea...

…de construir un sitio que sea un ejemplo elaborado de todas las cosas que podrías/deberías hacer durante un proceso de construcción. Inicié el sitio aquí (y el repositorio), pero aún no está haciendo demasiado. Creo que sería genial conectar todo lo que está en esa lista (¿y más?) a través de Build Plugins.

Si quieres contribuir, no dudes en hacérmelo saber. Tal vez envíeme un correo electrónico o abra un problema para hablar sobre lo que le gustaría hacer. También eres libre de hacer una solicitud de extracción, pero los RP sin ninguna comunicación previa a veces son un poco complicados, ya que es más difícil garantizar que nuestras visiones estén alineadas antes de poner mucho esfuerzo.