Magento 2 adiciona um novo tema sem alterar os arquivos principais. Grunhido

Como estender a configuração padrão do Magento 2 Grunt sem tocar / editar arquivos principais como Gruntfile.jse dev/tools/grunt/configs/themes.js?

Criar um novo tema para o Magento 2 pode ser um desafio, mesmo tendo experiência com o Magento antes. Os desenvolvedores decentes não alterariam os arquivos principais do Magento, mas criariam "invólucros"; portanto, no futuro, instalando patches e fazendo atualizações, você não terá uma situação em que todas as suas alterações sejam substituídas ou mescladas incorretamente.

Estenda os arquivos Gruntfile.js e themes.js

Digamos que você tenha criado um novo tema e, como sabemos pela documentação do Magento 2, você precisará alterar o arquivo que dev/tools/grunt/configs/themes.jsadiciona seu tema à lista, para que o Grunt possa compilar / vincular / copiar arquivos css / less na pub/staticpasta.

Etapa 1: Crie um /dev/tools/grunt/configs/themes.yourthemename.jsarquivo que estenda o themes.jsarquivo padrão como

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

Etapa 2: estender Gruntfile.jscom arquivoGruntfile.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);

Etapa 3: Agora você pode executar tarefas do Grunt para o seu tema, como:

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 a solução de Jev Mokrousov não combina com você, há duas alternativas que você pode tentar:

Comando de pós-instalação do compositor

Durante a instalação do magento/magento2-basepacote, o arquivo Gruntfile.jse a pasta dev/toolsserão copiados do pacote para a pasta raiz, substituindo os arquivos existentes, causados ​​pelo composer.jsonmapeamento base do Magento2 (veja vendor/magento/magento2-base/composer.jsonem seu projeto):

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

Você pode colocar suas versões Gruntfile.jse em dev/tools/grunt/configs/themes.jsalgum lugar (nós as colocamos dentro da nossa estrutura de diretórios de compilação build/tools/grunt/).

Agora há a possibilidade de adicionar comandos ou scripts extras antes ou depois de certos eventos do Composer. Poderíamos nos conectar ao post-install-cmdevento do compositor para copiar nossas versões desses arquivos sobre as principais do Magento. Você deve adicionar isso ao seu projeto composer.json:

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

Isto irá mostrar-lhe:

> 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 como um módulo Compositor

Assim como o magento/magento2-basepacote está mapeando arquivos para a raiz do projeto (como descrito acima), você também pode fazer isso sozinho.

Você pode colocar seu tema em um pacote Composer separado. Você precisará criar um repositório separado para isso. Os documentos do Magento já estão descrevendo esse processo: consulte "Tornar seu tema um pacote Composer"

Agora adicione isso no composer.jsonarquivo do seu tema :

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

Verifique se o primeiro caminho aponta para o local certo dentro do seu pacote de temas. Os caminhos são relativos a partir do local do composer.jsonarquivo do tema .

Aviso:
As duas soluções estão substituindo os arquivos principais. Isso pode causar problemas de patch ou atualização. Ao aplicar patches e atualizar, você sempre deve verificar o que será alterado e aplicar essas alterações em suas cópias desses arquivos principais.

• Esta é uma resposta suplementar à resposta de Jev Mokrousov.
• Escrito para Magento 2.1 (disseram-me que o Magento 2.2 terá soluções integradas para isso)

Como tenho certeza de que muitas pessoas estenderão um tema pai em vez de construí-lo completamente do zero, eis aqui uma sintaxe ligeiramente diferente oferecida para o seu themes.yourThemeName.jsarquivo. Em vez de definir completamente a configuração do nosso tema, nós a herdamos do pai e, em seguida, anexamos / modificamos o que há de novo / diferente.

Neste exemplo, estamos herdando a configuração do blank, definindo o nome do tema e adicionando os arquivos raiz adicionais do tema. Um benefício disso é que você não precisa declarar especificamente todos os arquivos do tema pai. Para as pessoas que estendem um tema pai que recebe atualizações periodicamente, isso pode ser benéfico. (Usar branco como cenário de exemplo aqui provavelmente não é a situação mais aplicável, mas os conceitos aplicados aqui são o que importa).

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