desy-html v6.0 - Manual de actualización

Owned by Servicios Digitales de Aragón
19 May 2022
8 min read

Esta versión viene marcada por la actualización del framework de CSS que usa desy: TailwindCSS sube a la versión v3.0.24 que es un cambio mayor y que cambia la forma de compilación y lleva incorporado el modo Just in Time, por lo cual, siempre hará una labor de escanear los archivos fuentes para limpiar las clases que no se usen. Ya no hay forma de compilar todas las clases de TailwindCSS en un archivo.

Más información acerca de la actualización de TailwindCSS aqui: Upgrade Guide - Tailwind CSS

Cambios en package.json

  • Cambio en tarea de prod:

    - "prod": "NODE_ENV=production gulp" + "prod": "NODE_ENV=production gulp prod"

     

  • Actualización de tailwindcss y sus plugins:

    - "tailwindcss": "^2.2.7" - "@tailwindcss/aspect-ratio": "^0.2.1", - "@tailwindcss/forms": "^0.3.3", - "@tailwindcss/typography": "^0.4.1", + "tailwindcss": "^3.0.24" + "@tailwindcss/aspect-ratio": "^0.4.0", + "@tailwindcss/forms": "^0.5.0", + "@tailwindcss/typography": "^0.5.2",

     

  • Ya no usamos cssnano:

    - "cssnano": "^4.1.10",

     

Cambios en gulpfile.js

  • Ya no usamos gulp-clean-css: (y borramos el archivo config/clean-css.js)

     

  • Cambios en la tarea watchFiles:

     

  • Cambios en los exports:

     

Cambios en config/tailwind.config.js

El archivo cambia ya que no se usa PurgeCSS sino que el css se purga internamente con TailwindCSS. Más información acerca de la actualización de TailwindCSS aqui: Upgrade Guide - Tailwind CSS

Pequeños cambios también para que el plugin de tailwindcss typography use font-bold en los h3 y los h4.

El archivo queda así: