Magento 2 aggiunge un nuovo tema senza cambiare i file core. Grugnito

Come estendere la configurazione predefinita di Magento 2 Grunt senza toccare / modificare file core come Gruntfile.jse dev/tools/grunt/configs/themes.js?

La creazione di un nuovo tema per Magento 2 potrebbe essere una sfida anche avere esperienza con Magento prima. Gli sviluppatori decenti non cambieranno i file Magento di base, ma creeranno invece "wrapper", quindi in futuro installando patch e facendo aggiornamenti non si verificheranno situazioni in cui tutte le modifiche verranno ignorate o unite in modo errato.

Estendi i file Gruntfile.js e themes.js

Supponiamo che tu abbia creato un nuovo tema e, come sappiamo dalla documentazione di Magento 2 , dovrai modificare il file dev/tools/grunt/configs/themes.jsaggiungendo il tuo tema all'elenco, in modo che Grunt possa compilare / symlink / copiare css / meno file nella pub/staticcartella.

Step1: Crea un /dev/tools/grunt/configs/themes.yourthemename.jsfile che estende il themes.jsfile predefinito come

'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);

Step2: estendi Gruntfile.jscon il fileGruntfile.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);

Step3: Ora puoi eseguire attività Grunt per il tuo tema come:

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

Quando la soluzione di Jev Mokrousov non ti sta bene, ci sono due alternative che potresti provare:

Comando post installazione del compositore

Durante l'installazione del magento/magento2-basepacchetto, il file Gruntfile.jse la cartella dev/toolsverranno copiati dal pacchetto nella cartella principale sovrascrivendo tutti i file esistenti, causati dalla composer.jsonmappatura di base Magento2 (vedi vendor/magento/magento2-base/composer.jsonnel tuo progetto):

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

Puoi posizionare le tue versioni di Gruntfile.jse dev/tools/grunt/configs/themes.jsda qualche parte (le abbiamo inserite nella nostra struttura di directory di build in build/tools/grunt/).

Ora c'è la possibilità di aggiungere ulteriori comandi o script prima o dopo determinati eventi di Composer. Potremmo agganciarci post-install-cmdall'evento di Composer per copiare le nostre versioni di questi file su quelle principali di Magento. Dovresti aggiungere questo al tuo progetto composer.json:

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

Questo ti mostrerà:

> 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’

Tema come modulo Compositore

Proprio come il magento/magento2-basepacchetto sta mappando i file nella radice del progetto (come descritto sopra), puoi farlo anche tu.

Puoi mettere il tuo tema in un pacchetto Composer separato. Per questo dovrai creare un repository separato. I documenti Magento stanno già descrivendo questo processo: vedi "Rendi il tuo tema un pacchetto Composer"

Ora aggiungi questo nel composer.jsonfile del tuo tema :

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

Assicurati che il primo percorso indichi la posizione corretta all'interno del pacchetto temi. I percorsi sono relativi dalla posizione del composer.jsonfile del tema .

Avvertenza:
entrambe le soluzioni stanno sovrascrivendo i file core. Ciò può causare problemi di patch o di aggiornamento. Quando si correggono e si aggiornano, è necessario verificare sempre cosa verrà modificato e applicare tali modifiche alle copie di questi file core.

• Questa è una risposta supplementare alla risposta di Jev Mokrousov.
• Scritto per Magento 2.1 (mi è stato detto che Magento 2.2 avrà soluzioni integrate migliori per questo)

Dato che sono sicuro che molte persone si troveranno ad estendere un tema genitore piuttosto che costruire completamente un tema da zero, ecco una sintassi leggermente diversa offerta per il tuo themes.yourThemeName.jsfile. Invece di definire completamente da zero la configurazione per il nostro tema, la ereditiamo dal genitore e quindi aggiungiamo / modifichiamo ciò che è nuovo / diverso.

In questo esempio stiamo ereditando dalla configurazione di blank, impostando il nome del nostro tema e aggiungendo i file radice aggiuntivi del nostro tema. Un vantaggio è che non è necessario dichiarare in modo specifico tutti i file dal tema principale. Per le persone che estendono periodicamente un tema genitore che riceve aggiornamenti, ciò potrebbe essere utile. (L'uso del vuoto come scenario del mio esempio qui probabilmente non è la situazione più applicabile, ma i concetti applicati qui sono ciò che conta).

'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 });