Magento 2 agrega un nuevo tema sin cambiar los archivos principales. Gruñido

¿Cómo extender la configuración predeterminada de Magento 2 Grunt sin tocar / editar archivos principales como Gruntfile.jsy dev/tools/grunt/configs/themes.js?

Crear un nuevo tema para Magento 2 podría ser un desafío, incluso tener experiencia con Magento antes. Los desarrolladores decentes no cambiarían los archivos principales de Magento, sino que crearían "envoltorios" en su lugar, por lo que en el futuro al instalar parches y realizar actualizaciones, no tendrá una situación en la que todos sus cambios se anulen o se fusionen incorrectamente.

Extienda archivos Gruntfile.js y themes.js

Supongamos que creó un nuevo tema y, como sabemos por la documentación de los documentos de Magento 2 , deberá cambiar el archivo dev/tools/grunt/configs/themes.jsagregando su tema a la lista, para que Grunt pueda compilar / vincular / copiar / css / menos archivos en la pub/staticcarpeta.

Paso 1: crear un /dev/tools/grunt/configs/themes.yourthemename.jsarchivo que amplíe el themes.jsarchivo predeterminado 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);

Paso 2: Ampliar Gruntfile.jscon archivoGruntfile.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);

Paso 3: Ahora puedes ejecutar tareas de Grunt para tu 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

Cuando la solución de Jev Mokrousov no le queda bien, hay dos alternativas que puede probar:

Comando de instalación posterior del compositor

Durante la instalación del magento/magento2-basepaquete, el archivo Gruntfile.jsy la carpeta dev/toolsse copiarán del paquete en su carpeta raíz sobrescribiendo los archivos existentes, causados ​​por la asignación base de Magento2 composer.json(consulte vendor/magento/magento2-base/composer.jsonen su proyecto):

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

Puede colocar sus versiones de Gruntfile.jsy en dev/tools/grunt/configs/themes.jsalgún lugar (las hemos colocado dentro de nuestra estructura de directorios de compilación build/tools/grunt/).

Ahora existe la posibilidad de agregar comandos o scripts adicionales antes o después de ciertos eventos de Composer. Podríamos conectarnos al post-install-cmdevento de Composer para copiar nuestras versiones de estos archivos sobre los principales de Magento. Debe agregar esto a su proyecto composer.json:

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

Esto te mostrará:

> 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 módulo de compositor

Al igual que el magento/magento2-basepaquete está asignando archivos a la raíz del proyecto (como se describe anteriormente), también puede hacerlo usted mismo.

Puedes poner tu tema en un paquete Composer separado. Tendrá que crear un repositorio separado para esto. Los documentos de Magento ya están describiendo este proceso: consulte "Convierta su tema en un paquete Composer"

Ahora agregue esto en el composer.jsonarchivo de su tema :

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

Asegúrese de que la primera ruta apunte a la ubicación correcta dentro de su paquete de temas. Las rutas son relativas desde la ubicación del composer.jsonarchivo del tema .

Advertencia:
Ambas soluciones están sobrescribiendo archivos principales. Esto puede causar problemas de parches o actualizaciones. Al parchar y actualizar, siempre debe verificar qué se va a cambiar y aplicar esos cambios en sus copias de estos archivos principales.

• Esta es una respuesta complementaria a la respuesta de Jev Mokrousov.
• Escrito para Magento 2.1 (me dijeron que Magento 2.2 tendrá mejores soluciones integradas para esto)

Como estoy seguro de que muchas personas se encontrarán ampliando un tema principal en lugar de crear un tema completamente desde cero, a continuación se ofrece una sintaxis ligeramente diferente para su themes.yourThemeName.jsarchivo. En lugar de definir completamente desde cero la configuración de nuestro tema, la heredamos del padre y luego agregamos / modificamos lo que es nuevo / diferente.

En este ejemplo, heredamos de la configuración en blanco, configuramos el nombre de nuestro tema y agregamos los archivos raíz adicionales de nuestro tema. Una ventaja de esto es que no tiene que declarar específicamente todos los archivos del tema principal. Para las personas que extienden un tema principal que recibe actualizaciones periódicamente, esto podría ser beneficioso. (Usar el blanco como mi escenario de ejemplo aquí probablemente no sea la situación más aplicable, pero los conceptos aplicados aquí es lo 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 });