Ou comment remplacer la compilation Grunt des fichiers LESS

La déclaration suivante ne sera une surprise pour personne : le processus de déploiement des fichiers statics de Magento 2 colle assez bien avec l'image que l'on peut se faire de l'enfer.
Quelque que soit la méthode utilisée (Magento 2 en propose 3), aucune ne se rapproche d'un workflow acceptable pour quelqu'un qui souhaite développer son thème : que ce soit l'agonie de la compilation côté serveur, le blinking "relativement" agaçant de la compilation client-side et la lenteur de Grunt, chaque solution possède son lot de défauts qui, à la longue, peuvent être nocifs à la santé mentale du développeur (si elle existe).



Heureusement, dans ces ténébres front-end, un halo de lumière existe, et ce notamment grâce à la chouette équipe de l'agence polonaise Snowdog.

Partant du principe que oui, effectivement, le workflow Grunt + LESS de Magento 2 est un peu pété, l'agence a mis au point quelques outils destinés à améliorer / simplifier le développement de thèmes. Ce qui se traduit par la re-écrite totale du thème Blank natif vers une version qui utilise SASS, et en suivant par la création de Frontools, qui est essentiellement une série de tâches Gulp permettant de compiler les fichiers SASS en CSS, mais aussi d'auto-prefixer, de mettre en place un Browsersync etc.



Pour installer le tout, c'est relativement aisé : armé de Composer, il faut dans un premier temps faire un require vers le thème SASS (snowdog/theme-blank-sass) et l'activer avec :

Le nouveau thème vierge basé sur SASS étant maintenant installé, il ne nous reste plus qu'à installer Frontools :

Nous allons ensuite mettre en place les outils de Frontools et les "copier" dans le dossier dev/tools/frontools grâce à :

Dans ce dossier figure maintenant un fichier themes.json qui va nous permettre de déclarer nos thèmes à compiler avec Gulp, comme par exemple :

 

La mise en place de Frontools est maintenant bouclée, et la compilation des fichiers SASS via Gulp est désormais possible grâce à la tâche "gulp styles" (à noter que d'autres tâches, comme "clean" ou "watch" sont dispos, la liste est à consulter ici) !