Magento 2 ajoute un nouveau thème sans changer les fichiers de base. Grognement

Comment étendre la configuration par défaut de Magento 2 Grunt sans toucher / éditer les fichiers principaux comme Gruntfile.jset dev/tools/grunt/configs/themes.js?

Créer un nouveau thème pour Magento 2 pourrait être un défi, même si vous aviez déjà utilisé Magento. Les développeurs décents ne changeraient pas les fichiers principaux de Magento, mais créeraient plutôt des "wrappers", donc à l'avenir, l'installation de correctifs et la mise à jour ne vous permettront pas de remplacer toutes vos modifications ou de les fusionner incorrectement.

Étendre les fichiers Gruntfile.js et themes.js

Supposons que vous ayez créé un nouveau thème et comme nous le savons dans la documentation des documents Magento 2, vous devrez modifier le fichier en dev/tools/grunt/configs/themes.jsajoutant votre thème à la liste, afin que Grunt puisse compiler / créer un lien symbolique / copier des fichiers CSS / moins dans le pub/staticdossier.

Étape 1: créer un /dev/tools/grunt/configs/themes.yourthemename.jsfichier qui étend le themes.jsfichier par défaut en tant que

'use strict';

var defaultThemes   = require('./themes'),
    _               = require('underscore');

var yourTheme = {
    yourthemename: {
        area: 'frontend',
        name: '<vendor>/<yourthemename>',
        locale: 'en_US',
        files: [
            'css/main',
        ],
        dsl: 'less'
    }
};

module.exports = _.extend(defaultThemes, yourTheme);

Étape 2: étendre Gruntfile.jsavec un fichierGruntfile.yourthemename.js

'use strict';

var defaultGruntfile    = require('./Gruntfile'),
    _                   = require('underscore');

var yourthemeGruntfile = {};
    yourthemeGruntfile.themes = require('./dev/tools/grunt/configs/themes.yourthemename');

module.exports = _.extend(defaultGruntfile, yourthemeGruntfile);

Étape 3: Maintenant, vous pouvez exécuter des tâches Grunt pour votre thème comme:

grunt --gruntfile=Gruntfile.yourthemename.js clean:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js exec:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js less:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js watch:yourthemename

Lorsque la solution de Jev Mokrousov ne vous convient pas, vous pouvez essayer deux alternatives:

Commande de post-installation du compositeur

Pendant l'installation du magento/magento2-basepackage, le fichier Gruntfile.jset le dossier dev/toolsseront copiés du package dans votre dossier racine en écrasant tous les fichiers existants, causés par le mappage de base Magento2 composer.json(voir vendor/magento/magento2-base/composer.jsondans votre projet):

{
    "extra": {
        "map": [
            [
                "dev/tools",
                "dev/tools"
            ],
            [
                "Gruntfile.js",
                "Gruntfile.js"
            ]
        ]
    }
}

Vous pouvez placer vos versions de Gruntfile.jset dev/tools/grunt/configs/themes.jsquelque part (nous les avons mises dans notre structure de répertoire de construction build/tools/grunt/).

Il est désormais possible d'ajouter des commandes ou des scripts supplémentaires avant ou après certains événements Composer. Nous pourrions nous accrocher à l' post-install-cmdévénement Composer pour copier nos versions de ces fichiers sur celles de base de Magento. Vous devez l'ajouter à votre projet composer.json:

{
    "scripts": {
        "post-install-cmd": "cp -vfp build/tools/grunt/Gruntfile.js . && cp -vfp build/tools/grunt/themes.js dev/tools/grunt/configs/"
    }
}

Cela vous montrera:

> cp -vfp build/tools/grunt/Gruntfile.js . && cp -vfp build/tools/grunt/themes.js dev/tools/grunt/configs/
‘build/tools/grunt/Gruntfile.js’ -> ‘Gruntfile.js’
‘build/tools/grunt/themes.js’ -> ‘dev/tools/grunt/configs/themes.js’

Thème en tant que module Compositeur

Tout comme le magento/magento2-basepackage mappe des fichiers dans la racine du projet (comme décrit ci-dessus), vous pouvez également le faire vous-même.

Vous pouvez placer votre thème dans un package Composer distinct. Vous devrez créer un référentiel séparé pour cela. Les documents Magento décrivent déjà ce processus: voir "Faire de votre thème un package Composer"

Ajoutez maintenant ceci dans le composer.jsonfichier de votre thème :

{
    "extra": {
        "map": [
            [
                "dev/tools/grunt/configs/themes.js",
                "dev/tools/grunt/configs/themes.js"
            ],
            [
                "Gruntfile.js",
                "Gruntfile.js"
            ]
        ]
    }
}

Assurez-vous que le premier chemin pointe vers le bon emplacement dans votre package de thème. Les chemins sont relatifs depuis l'emplacement du composer.jsonfichier du thème .

Avertissement: les
deux solutions remplacent les fichiers principaux. Cela peut entraîner des problèmes de correctif ou de mise à niveau. Lors du correctif et de la mise à niveau, vous devez toujours vérifier ce qui va être modifié et appliquer ces modifications sur vos copies de ces fichiers de base.

• Il s'agit d'une réponse complémentaire à la réponse de Jev Mokrousov.
• Écrit pour Magento 2.1 (on me dit que Magento 2.2 aura de meilleures solutions intégrées à cela)

Comme je suis sûr que beaucoup de gens se retrouveront à étendre un thème parent plutôt que de construire complètement un thème à partir de zéro, voici une syntaxe légèrement différente offerte pour votre themes.yourThemeName.jsfichier. Plutôt que de définir complètement à partir de zéro la configuration de notre thème, nous l'héritons du parent, puis ajoutons / modifions ce qui est nouveau / différent.

Dans cet exemple, nous héritons de la configuration de blank, définissons le nom de notre thème et ajoutons les fichiers racine supplémentaires de notre thème. Un avantage à cela est que vous n'avez pas à déclarer spécifiquement tous les fichiers du thème parent. Pour les personnes étendant un thème parent qui reçoit des mises à jour périodiquement, cela pourrait être bénéfique. (L'utilisation du blanc comme exemple de scénario ici n'est probablement pas la situation la plus applicable, mais ce sont les concepts appliqués ici qui importent).

'use strict';

// If your theme's parent has it's own "themes.someOtherName.js" file, 
// require that file instead of Magento's native "themes.js" file.
var defaultThemes   = require('./themes'),
    _               = require('underscore');

// Update "blank" to the name of your parent theme's Grunt config.
// Update "<vendor>/<yourThemeName>"
var yourThemeNameConfig = _.extend(defaultThemes.blank, {name:'<vendor>/<yourThemeName>'});

// Change this to add your root files, add more as necessary
yourThemeNameConfig.files.push('css/new-file');

// Change "yourThemeName" to what you want to reference in your Grunt command.
module.exports = _.extend(defaultThemes, { yourThemeName: yourThemeNameConfig });