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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
module.exports = { blank: { area: 'frontend', name: 'Magento/blank', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l', 'css/email', 'css/email-inline' ], dsl: 'less' }, luma: { area: 'frontend', name: 'Magento/luma', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }, backend: { area: 'adminhtml', name: 'Magento/backend', locale: 'en_US', files: [ 'css/styles-old', 'css/styles' ], dsl: 'less' }, luma_child: { area: 'frontend', name: 'Magento/luma-child', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' } }; |
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:
|
|
module.exports = { luma_child: { area: 'frontend', name: 'Magento/luma-child', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' } }; |
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:
|
|
var lessOptions = { options: { sourceMap: true, strictImports: false, sourceMapRootpath: '/', dumpLineNumbers: false, // use 'comments' instead false to output line comments for source ieCompat: false, plugins: [ new (require('less-plugin-lists'))() ] }, |
$ 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):
|
|
Running "less:documentation" (less) task >> SyntaxError: variable @_icon-font-text-hide is undefined in lib/web/css/docs/source/_icons.less on line 31, column 5: >> 30 .example-icon-2 { >> 31 .lib-icon-image( >> 32 @_icon-image: '@{baseDir}images/blank-theme-icons.png', Warning: Error compiling lib/web/css/docs/source/docs.less Use --force to continue. Aborted due to warnings. |
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:
|
|
// , // documentation: { // files: { // '<%= path.doc %>/docs.css': '<%= path.doc %>/source/docs.less' // } // } |
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:
|
|
_.each(themes, function(theme, name) { if(name == 'backend' || name == 'luma') { return false } else { themeOptions[name] = { files: combo.lessFiles(name) }; } }); |
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:
|
|
module.exports = { luma-child: { } }; |
Example de bonne pratique dans la déclaration d’un thème:
|
|
module.exports = { luma_child: { } }; |
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.