Magento 2, çekirdek dosyaları değiştirmeden yeni tema ekler. Homurtu

Gruntfile.jsVe gibi temel dosyalara dokunmadan / düzenlemeden varsayılan Magento 2 Grunt yapılandırmasını nasıl genişletebilirim dev/tools/grunt/configs/themes.js?

Magento 2 için yeni tema oluşturmak, daha önce Magento ile deneyim sahibi olmak bile zor olabilir. İyi geliştiriciler çekirdek Magento dosyalarını değiştirmez, bunun yerine "sarmalayıcılar" oluşturur, bu nedenle ileride yamalar yüklerken ve güncellemeler yaparken tüm değişiklikleriniz geçersiz kılındığında veya yanlış birleştirildiğinde durumunuz olmaz.

Gruntfile.js ve themes.js dosyalarını genişletme

Yeni tema oluşturduğunuzu ve Magento 2 belgelerinin belgelerinden bildiğimiz gibi dev/tools/grunt/configs/themes.js, temanızı listeye ekleyerek dosyayı değiştirmeniz gerekecek , böylece Grunt / symlink / css / less dosyalarını cs / dll dosyalarını pub/staticklasöre kopyalayabilir.

Adım 1: /dev/tools/grunt/configs/themes.yourthemename.jsVarsayılan themes.jsdosyayı şu şekilde genişleten bir dosya oluşturun:

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

Adım 2: Gruntfile.jsDosyayla genişletGruntfile.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: Artık temanız için Grunt görevlerini aşağıdaki gibi çalıştırabilirsiniz:

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

Ne zaman Jev Mokrousov 'ın çözüm size uymuyorsa, sen deneyebilirsiniz iki seçenek vardır:

Besteci sonrası yükleme komutu

magento/magento2-basePaketin yüklenmesi sırasında, dosya Gruntfile.jsve klasör dev/tools, Magento2 temel composer.jsoneşlemesinin neden olduğu mevcut dosyaların üzerine yazarak paketten kök klasörünüze kopyalanır ( vendor/magento/magento2-base/composer.jsonprojenize bakın):

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

Sürümlerinizi Gruntfile.jsve dev/tools/grunt/configs/themes.jsbaşka bir yere yerleştirebilirsiniz (bunları yapı dizini yapımızın içine yerleştirdik build/tools/grunt/).

Artık belirli Composer olaylarından önce veya sonra fazladan komut veya komut dosyası ekleme imkanı var . post-install-cmdBu dosyaların sürümlerimizi Magento'nun çekirdek dosyaları üzerine kopyalamak için Composer'in etkinliğine bağlanabiliriz. Bunu projenize eklemelisiniz composer.json:

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

Bu size şunları gösterecektir:

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

Besteci modülü olarak tema

magento/magento2-basePaketin dosyaları projenin kök dizinine eşlemesi gibi (yukarıda açıklandığı gibi) bunu kendiniz de yapabilirsiniz.

Temanızı ayrı bir Besteci paketine koyabilirsiniz. Bunun için ayrı bir depo oluşturmanız gerekir. Magento belgeleri bu işlemi zaten açıklıyor: bkz. "Temanızı bir Besteci paketi yapma"

Şimdi bunu temanızın composer.jsondosyasına ekleyin :

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

İlk yolun tema paketinizin içindeki doğru konumu gösterdiğinden emin olun. Yollar, temanın composer.jsondosyasının konumundan görecelidir .

Uyarı:
Her iki çözüm de temel dosyaların üzerine yazılır. Bu düzeltme eki veya yükseltme sorunlarına neden olabilir. Düzeltme ekini ve yükseltmeyi yaparken nelerin değiştirileceğini daima kontrol etmeli ve bu değişiklikleri bu temel dosyaların kopyalarına uygulamalısınız.

• Bu, Jev Mokrousov'un cevabına ek bir cevaptır.
• Magento 2.1 için yazılmıştır (Magento 2.2'nin buna daha iyi yerleşik çözümler içereceği söylendi)

Pek çok insanın tamamen sıfırdan bir tema oluşturmak yerine kendilerini bir ana temayı genişlettiğini bulacağımdan , themes.yourThemeName.jsdosyanız için sunulan biraz farklı sözdizimi aşağıdadır . Temamız için yapılandırmayı sıfırdan tanımlamak yerine, onu üst öğeden devralırız ve sonra yeni / farklı olanı ekler / değiştiririz.

Bu örnekte blank'ın yapılandırmasından miras alıyoruz, tema adımızı ayarlıyoruz ve temamızın ek kök dosyalarını ekliyoruz. Bunun bir yararı, ana temanın tüm dosyalarını özel olarak bildirmeniz gerekmemesidir. Periyodik olarak güncelleme alan bir ana temayı uzatan kişiler için bu yararlı olabilir. (Burada örnek senaryom olarak boşluk kullanmak muhtemelen en uygun durum değildir, ancak burada uygulanan kavramlar önemlidir).

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