Magento 2 menambahkan tema baru tanpa mengubah file inti. Mendengus

Bagaimana cara memperpanjang konfigurasi Magento 2 Grunt default tanpa menyentuh / mengedit file inti seperti Gruntfile.jsdan dev/tools/grunt/configs/themes.js?

Membuat tema baru untuk Magento 2 bisa menjadi tantangan bahkan memiliki pengalaman dengan Magento sebelumnya. Pengembang yang layak tidak akan mengubah file inti Magento, tetapi membuat "pembungkus" sebagai gantinya, jadi di masa depan menginstal tambalan dan melakukan pembaruan Anda tidak akan memiliki situasi ketika semua perubahan Anda ditimpa atau digabungkan secara tidak benar.

Perpanjang file Gruntfile.js dan themes.js

Katakanlah Anda membuat tema baru dan seperti yang kita ketahui dari dokumentasi Magento 2 docs Anda perlu mengubah file dev/tools/grunt/configs/themes.jsmenambahkan tema Anda ke daftar, sehingga Grunt dapat mengkompilasi / symlink / menyalin css / lebih sedikit file ke dalam pub/staticfolder.

Langkah1: Buat /dev/tools/grunt/configs/themes.yourthemename.jsfile yang memperluas themes.jsfile default sebagai

'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: Perpanjang Gruntfile.jsdengan 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);

Langkah 3: Sekarang Anda dapat menjalankan tugas Grunt untuk tema Anda seperti:

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

Ketika solusi Jev Mokrousov tidak cocok untuk Anda, ada dua alternatif yang bisa Anda coba:

Perintah pemasangan pos komposer

Selama instalasi magento/magento2-basepaket, file Gruntfile.jsdan folder dev/toolsakan disalin dari paket ke folder root Anda menimpa file yang ada, yang disebabkan oleh composer.jsonpemetaan basis Magento2 (lihat vendor/magento/magento2-base/composer.jsondi proyek Anda):

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

Anda dapat menempatkan versi Anda Gruntfile.jsdan dev/tools/grunt/configs/themes.jsdi suatu tempat (kami telah menempatkan mereka di dalam struktur direktori build kami di build/tools/grunt/).

Sekarang ada kemungkinan untuk menambahkan perintah atau skrip tambahan sebelum atau setelah peristiwa Komponis tertentu. Kita bisa terhubung ke post-install-cmdacara Composer untuk menyalin versi file-file ini di atas file inti Magento. Anda harus menambahkan ini ke proyek Anda composer.json:

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

Ini akan menunjukkan kepada Anda:

> 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 sebagai modul Komposer

Sama seperti magento/magento2-basepaket ini memetakan file ke root proyek (seperti dijelaskan di atas) Anda juga dapat melakukan ini sendiri.

Anda dapat menempatkan tema Anda dalam paket Komposer yang terpisah. Anda harus membuat repositori terpisah untuk ini. Dokumen Magento sudah menggambarkan proses ini: lihat "Jadikan tema Anda paket Penggubah"

Sekarang tambahkan ini di composer.jsonfile tema Anda :

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

Pastikan jalur pertama menunjuk ke lokasi yang tepat di dalam paket tema Anda. Jalur relatif dari lokasi composer.jsonfile tema .

Peringatan:
Kedua solusi tersebut menimpa file inti. Ini dapat menyebabkan masalah tambalan atau peningkatan. Saat menambal dan meningkatkan, Anda harus selalu memeriksa apa yang akan diubah dan menerapkan perubahan itu pada salinan file inti ini.

• Ini adalah jawaban tambahan untuk jawaban Jev Mokrousov.
• Ditulis untuk Magento 2.1 (saya diberi tahu Magento 2.2 akan memiliki solusi yang lebih baik untuk ini)

Karena saya yakin banyak orang akan menemukan diri mereka memperluas tema induk daripada sepenuhnya membangun tema dari awal, berikut adalah beberapa sintaks yang sedikit berbeda yang ditawarkan untuk themes.yourThemeName.jsfile Anda . Daripada sepenuhnya mendefinisikan dari awal konfigurasi untuk tema kita, kita mewarisinya dari induknya, dan kemudian menambahkan / memodifikasi apa yang baru / berbeda.

Dalam contoh ini kita mewarisi dari konfigurasi blank, mengatur nama tema kita, dan menambahkan file root tambahan tema kita. Manfaatnya adalah Anda tidak harus secara khusus mendeklarasikan semua file dari tema induk. Bagi orang-orang yang memperpanjang tema orang tua yang menerima pembaruan secara berkala, ini bisa bermanfaat. (Menggunakan kosong sebagai skenario contoh saya di sini mungkin bukan situasi yang paling berlaku, tetapi konsep yang diterapkan di sini adalah yang penting).

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