Difference between static content deploy & grunt exec.

Utilisation de Grunt lorsque le mode developer de Magento 2 est activé

Activer le mode developer de Magento 2

Activer le mode Developer de Magento 2: $ bin/magento deploy:mode:set developer.

Se rendre en backoffice dans Stores > Configuration [Settings] > ADVANCED > Developer. Dans Frontend Development Workflow > champ Workflow type > sélectionner « Client side less compilation » (au besoin, décocher la case « Use system value »). Bouton « Save Config » en haut à droite.

Préparer les fichiers de config nécessaires à l’utilisation de Grunt dans Magento 2

$ cp package.json.sample package.json; cp Gruntfile.js.sample Gruntfile.js; cp grunt-config.json.sample grunt-config.json; cp dev/tools/grunt/configs/themes.js dev/tools/grunt/configs/local-themes.js

Nous allons partir du principe que nous utilisons Grunt pour processer les fichiers source d’un thème enfant « luma-child ». C’est la raison pour laquelle nous créons un fichier dev/tools/grunt/configs/local-themes.js qui contient donc ceci:

Lancer les tâches Grunt et commencer à développer

Lancer la commande $ grunt clean && grunt exec && grunt watch. Lorsque Grunt est arrivé au bout des tâches clean, et exec, la tâche watch débute et vos fichiers sont surveillés. Désormais, à chaque fois que vous souhaiterez tester une modification en front pendant que la tâche watch tourne, il faudra lancer la commande $ rm -rf pub/static/*; rm -rf var/view_preprocessed/* avant de rafraîchir la fenêtre de votre navigateur.

Remarque: si vous rencontrez une erreur (dans l’exécution des tâches précédant le grunt watch) qui stoppe le process, le grunt watch ne fonctionnera pas correctement.

Remarque #2: la tâche $ grunt watch semble fonctionner uniquement si elle est exécutée précédée des tâches $ grunt clean && grunt exec.

Remarque #3: pour la surveillance des fichiers *.less, elle semble concerner l’ensemble des fichiers présents dans le scope du dossier /app/design/frontend/<Vendor>/theme/web/css/source. Autrement dit, pas besoin de déclarer ces fichiers dans /dev/tools/grunt/configs/local-theme.js. Exemple ci-dessous avec un thème luma_child:

A savoir: La présence des fichiers css/styles-m et css/styles-l n’est pas obligatoire dans votre thème, mais les déclarer dans votre fichier /dev/tools/grunt/configs/local-theme.js permet à Grunt de bien prendre en compte les fichiers de base d’un thème Magento 2 (_theme.less, _extend.less, etc…). J’ai eu, par exemple, un cas où la tâche grunt watch ne surveillait pas le code que j’écrivais et les fichiers que j’importais depuis le fichier natif _extend.less dans mon thème enfant. Après avoir signalé la présence des fichiers css/styles-m et css/styles-l dans mon fichier /dev/tools/grunt/configs/local-theme.js, le fichier _extend.less et tous les fichiers importés depuis ce dernier étaient surveillés.

Créer une tâche custom dans Grunt

Testé fonctionnel. Source: How to create a custom Grunt task in Magento 2 et version PDF pour la postérité.

Ajouter un plugin pour grunt-contrib-less

Attention: WiP pas fonctionnel

Attention #2: pensez à vérifier la compatibilité de votre plugin avec la version de grunt-contrib-less déclarée dans le fichier package.json à la racine de votre projet Magento 2!

$ npm install --save-dev less-plugin-lists

Modifier <project_root_folder>\dev\tools\grunt\configs\less.js en déclarant le plugin less-plugin-lists via l’option plugins de grunt-contrib-less:

$ grunt clean && grunt exec && grunt less && grunt watch

Supprimer la sous-tâche Grunt less:documentation du process de compilation des assets front-end de Magento 2

Lorsque le process Grunt en arrive à la sous-tâche less:documentation, j’obtiens ce message d’erreur (Magento 2.3):

Il s’agit d’une variable less qui n’est pas définie. On peut donc corriger les fichier less en définissant cette variable manquante, mais on peut aussi supprimer la sous-tache Grunt qui consiste à générer la documentation. Pour ce faire, éditer le fichier dev\tools\grunt\configs\less.js pour mettre les lignes suivantes en commentaire:

Ne pas compiler certains thèmes

Dans le fichier dev/tools/grunt/configs/less.js, ajouter une condition à la fonction _each et y lister les thèmes qui ne doivent pas être compilés:

Grunt dans Magento 2 – Troubleshooting

Erreur SyntaxError: unexpected token -" au lancement d’une tâche Grunt

ATTENTION: n’utilisez pas le caractère « tiret du 6 » (-) pour déclarer le libellé du thème dans le fichier dev/tools/grunt/configs/local-themes.js; préférez l’underscore (_) pour ne pas obtenir l’erreur SyntaxError: unexpected token -" au lancement de vos tâches Grunt!

Example de mauvaise pratique dans la déclaration d’un thème:

Example de bonne pratique dans la déclaration d’un thème:

En backoffice, la colonne de gauche est tassée

Les libellés des onglets s’affichent un caractère par ligne. Solution: lancer les processes Grunt avec la commande $ grunt clean && grunt exec && grunt less && grunt watch. Laisser terminer. Lorsque Grunt est en watch, taper dans un terminal la commande de suppression des fichiers statiques: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*. Rafraîchir votre page.