Como estender a configuração padrão do Magento 2 Grunt sem tocar / editar arquivos principais como Gruntfile.js
e 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.js
adiciona seu tema à lista, para que o Grunt possa compilar / vincular / copiar arquivos css / less na pub/static
pasta.
Etapa 1: Crie um /dev/tools/grunt/configs/themes.yourthemename.js
arquivo que estenda o themes.js
arquivo 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.js
com 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
exec:yourthemename
, você começaWarning: Required config property "clean.yourthemename" missing. Used --force, continuing.
? É estranho poder limpar meu tema com oclean:yourthemename
comando, mas acho que oexec
comando deve fazer isso sem erros.dev/tools/grunt/configs
perform arequire('./themes')
, exemplosclean.js
eexec.js
dentro desse diretório configs. O que me leva a acreditar que esses arquivos perderão nosso tema recém-adicionadothemes.yourthemename.js
. Ainda esta configuração funciona Eu só não pode determinar a causa do meuRequired config property "clean.yourthemename" missing.
erro ...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-base
pacote, o arquivoGruntfile.js
e a pastadev/tools
serão copiados do pacote para a pasta raiz, substituindo os arquivos existentes, causados pelocomposer.json
mapeamento base do Magento2 (vejavendor/magento/magento2-base/composer.json
em seu projeto):Você pode colocar suas versões
Gruntfile.js
e emdev/tools/grunt/configs/themes.js
algum lugar (nós as colocamos dentro da nossa estrutura de diretórios de compilaçãobuild/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-cmd
evento do compositor para copiar nossas versões desses arquivos sobre as principais do Magento. Você deve adicionar isso ao seu projetocomposer.json
:Isto irá mostrar-lhe:
Tema como um módulo Compositor
Assim como o
magento/magento2-base
pacote 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.json
arquivo do seu tema :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.json
arquivo 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.
fonte
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.js
arquivo. 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).
fonte