Advertencia: este es un screencast de nivel intermedio serpenteante en el que observamos el código que impulsa el proceso de compilación de un sitio. No escribimos ningún código.
Un "proceso de compilación" es todo lo que ocurre entre el código que escribe y el código que se envía a un sitio web activo. Hemos hablado antes sobre el uso de Grunt para esto. Se procesa Sass, se combinan los activos, se minimiza y optimiza, etc. Hay un sinfín de cosas que un proceso de construcción puede hacer por usted.
He estado trabajando con Katie Kovalcin en la construcción de un nuevo sitio personal para ella. Es un experimento para ambos para aprender nuevos procesos y probar cosas nuevas. En este caso, estoy usando Jekyll por primera vez y estoy automatizando un sistema SVG por primera vez.
En el momento del screencast, estaba en medio de todo, pero conseguí que el sistema de compilación funcionara sin problemas, así que pensé que era un buen momento para compartirlo. Siempre creo que es un buen momento para compartir, justo en el momento en que algo te encaja.
Cosas que suceden:
- Grunt ejecuta todas las tareas.
- El sitio se está construyendo con Jekyll. Lo que significa que procesa los diseños y el contenido en páginas web completas. Cuando el contenido o el diseño cambian, Grunt ejecuta la compilación Jekyll.
- Jekyll también ejecuta el servidor local.
- Sass es el preprocesador de CSS. Cuando un archivo Sass cambia, Grunt ejecuta la complicación Sass. Luego, Grunt ejecuta Autoprefixer en el resultado. Luego, Grunt vuelve a ejecutar la compilación de Jekyll para asegurarse de que el sitio procesado pueda utilizar todas las cosas nuevas.
- El sitio utiliza un sistema SVG. Para los íconos, pero también el logotipo y quién sabe qué todo lo demás al final. Los archivos SVG se mantienen todos separados en una carpeta "svg". Cuando alguno de ellos cambia, Grunt ejecuta la tarea svgstore para procesarlos todos juntos. Luego, Grunt ejecuta la compilación de Jekyll para que todo el SVG actual esté disponible para el sitio.
- Debido a que este es un repositorio en GitHub y las páginas de GitHub son compatibles con Jekyll, podemos obtener automáticamente una versión en vivo y alojada de este sitio. También podemos señalar otro dominio en este sitio.