Grunt para compilar less en Magento 2

Magento 2, por defecto, utiliza less como lenguaje dinámico de CSS.

Esto significa que debemos compilar el código less para transformarlo en CSS y que sea interpretado por los navegadores.

Magento recomienda el uso de Grunt para esto. La finalidad de este articulo es mostrar como proceder para instalarlo en un SO Ubuntu y utilizarlo en nuestro proyecto Magento 2.

Grunt requiere Node JS para funcionar, entonces el primer paso es instalar Node JS si es que no lo tenemos instalado.

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

El siguiente paso es instalar Grunt en nuestro entorno.

sudo npm install -g grunt-cli

Si todo salio bien tenemos que configurar Grunt en nuestro proyecto.

Vamos a la carpeta donde esta la raíz de nuestro proyecto:

cd proyecto

Ahí, encontraremos 2 archivos que vienen con Magento 2 y deben ser renombrados antes de proceder.

renombrar “package.json.sample” como “package.json”
renombrar “Gruntfile.js.sample” como “Gruntfile.js”

Ahora vamos a actualizar las dependencias de Node JS

sudo npm install grunt --save-dev
sudo npm install
sudo npm update
sudo npm install grunt-contrib-less

El siguiente paso es configurar nuestro theme, lo haremos editando el archivo “dev/tools/grunt/configs/themes.js” y en la sección “module.exports = {” agregaremos lo siguiente:

customtheme: {
    area: 'frontend',
    name: 'Orangecat/customtheme',
    locale: 'en_US',
    files: [
        'css/styles-m',
        'css/styles-l'
    ],
    dsl: 'less'
},

Deberás reemplazar “customtheme” por el nombre del theme que se esta desarrollando.

Antes de activar Grunt recomiendo limpiar los caches y los archivos compilados, yo corro los siguientes comandos para asegurarme que todo quede limpio.

rm -rf pub/static/*
rm -rf var/view_preprocessed/*
rm -rf var/cache/*
rm -rf var/page_cache/*
php bin/magento cache:flush

El otro punto importante es asegurarse que los directorios “var” y “pub” tienen los permisos adecuados si no los tienen no se podrán compilar los archivos.

Cuando queramos comenzar a trabajar con nuestro theme, debemos correr activar Grunt

grunt exec:customtheme

y luego correr el comando

grunt watch

que es el que recompilara los archivos necesarios cada vez que se haga una petición al servidor.

Otros comandos utiles son:

grunt clean
grunt less

El primero vacía los archivos del theme en los directorios “pub” y “var” y el otro compila los archivos del theme.

Para mas detalles pueden consultar la documentacion de Magento 2 en ingles disponible: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html