Uno de los procesos más costosos de Magento es la compilación de estilos LESS para obtener los CSS resultantes, lo cual puede provocar grandes pérdidas de tiempo cuando se tienen que definir estilos para un gran número de páginas o elementos. Para dar solución a este problema, Magento incluye la herramienta GRUNT con una serie de tareas que agilizan la compilación de estilos LESS conforme realizamos cambios en los mismos.
¿Qué es GRUNT?
Grunt es una herramienta desarrollada en Javascript que permite definir tareas automáticas que podrán ser lanzadas de forma recurrente. Estas tareas pueden tener diferentes objetivos: Testing, minificación, revisión de código, compilación less/sass…
Por defecto, Magento incluye Grunt como dependencia NPM (definida en el fichero package.json), así como varias tareas centradas en la compilación de estilos LESS. Gracias a esto, su configuración y uso es bastante sencilla.
Configurar GRUNT en Magento
A continuación se indican los pasos a dar para instalar y configurar Grunt en un proyecto Magento (entorno debian/ubuntu).
Hay que destacar que algunas de las tareas GRUNT de compilación de estilos de Magento se basan en la utilización del script PHP “bin/magento”, por lo que el entorno en el que configuremos GRUNT debe contar con el cliente PHP instalado.
1. Instalación de NodeJS y NPM:
curl -sL https://deb.nodesource.com/setup_12.x | bash -
apt-get update
apt-get install -y nodejs
2. Instalación Grunt:
npm install -g grunt-cli
3. Renombrar los siguientes ficheros incluidos en el proyecto Magento:
- package.json.sample –> package.json
- Gruntfile.js.sample –> Gruntfile.js
- grunt-config.json.sample –> grunt-config.json
4. Instalar librerías y dependencias NPM (desde el dir. raíz de Magento):
npm install
npm update
5. Crear el fichero “dev/tools/grunt/configs/local-themes.js”: En este fichero debe definirse el tema para el que queremos compilar estilos, usando el siguiente formato (deberán reemplazarse los datos resaltados por los correspondientes).
module.exports = {
<theme>: {
area: 'frontend',
name: '<Vendor>/<theme>',
locale: '<lang_LOCALE>',
files: [
'css/styles-m',
'css/styles-l'
],
dsl: 'less'
}
};Usar GRUNT para compilar LESS
Una vez realizados los pasos indicados, nuestro entorno estará preparado para utilizar las siguientes tareas Grunt para la compilación de estilos LESS:
- Recopilar ficheros LESS y crear enlaces simbólicos en pub/static
grunt exec:<theme>
- Eliminar enlaces simbólicos a los ficheros LESS
grunt clean
Compilar estilos LESS (Síncrono)
grunt less:<theme>
- Compilar estilos LESS (Asíncrono. Cada vez que se realiza un cambio de estilos, se recompilan)
grunt watch:<theme>
Tanto los comandos “grunt less” como “grunt watch” se encargan de compilar las hojas de estilo LESS incluidas en pub/static. Es decir, cada vez que creemos una nueva hoja de estilos, deberemos lanzar el comando “grunt exec” para incluir la referencia a esta nueva hoja en el directorio pub/static.
