Magento 2 เพิ่มธีมใหม่โดยไม่ต้องเปลี่ยนไฟล์หลัก เสี้ยงฮึดฮัดแสดงความไม่พอใจ

วิธีการขยายการกำหนดค่า Magento 2 Grunt เริ่มต้นโดยไม่ต้องสัมผัส / แก้ไขไฟล์แกนเช่นGruntfile.jsและdev/tools/grunt/configs/themes.js?

การสร้างชุดรูปแบบใหม่สำหรับ Magento 2 อาจเป็นสิ่งที่ท้าทายแม้กระทั่งเคยมีประสบการณ์กับ Magento มาก่อน ผู้พัฒนาที่มีชื่อเสียงจะไม่เปลี่ยนไฟล์หลักของวีโอไอพี แต่สร้าง "wrappers" แทนดังนั้นในอนาคตการติดตั้งแพตช์และทำการอัปเดตคุณจะไม่มีสถานการณ์เมื่อการเปลี่ยนแปลงทั้งหมดของคุณถูกแทนที่หรือถูกผสานอย่างไม่ถูกต้อง

ขยายไฟล์ Gruntfile.js และ themes.js

สมมติว่าคุณสร้างชุดรูปแบบใหม่และดังที่เราทราบจากเอกสารประกอบMagento 2คุณจะต้องเปลี่ยนไฟล์ที่dev/tools/grunt/configs/themes.jsเพิ่มธีมของคุณลงในรายการดังนั้น Grunt สามารถรวบรวม / symlink / คัดลอกไฟล์ css / less ในpub/staticโฟลเดอร์

ขั้นที่ 1: สร้าง/dev/tools/grunt/configs/themes.yourthemename.jsไฟล์ที่ขยายthemes.jsไฟล์เริ่มต้นเป็น

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

ขั้นตอนที่ 2: ขยายGruntfile.jsด้วยไฟล์Gruntfile.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);

ขั้นตอนที่ 3: ตอนนี้คุณสามารถรันงาน Grunt สำหรับธีมของคุณเช่น:

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

เมื่อโซลูชันของ Jev Mokrousovไม่เหมาะกับคุณมีสองทางเลือกที่คุณสามารถลองได้:

คำสั่ง post composer post install

ระหว่างการติดตั้งmagento/magento2-baseแพคเกจไฟล์Gruntfile.jsและโฟลเดอร์dev/toolsจะถูกคัดลอกจากแพ็คเกจไปยังโฟลเดอร์รากของคุณเขียนทับไฟล์ที่มีอยู่ใด ๆ ที่เกิดจากการcomposer.jsonแม็พฐานของ Magento2 (ดูvendor/magento/magento2-base/composer.jsonในโครงการของคุณ):

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

คุณสามารถวางเวอร์ชันของคุณGruntfile.jsและที่dev/tools/grunt/configs/themes.jsอื่น (เราได้ใส่ไว้ในโครงสร้างไดเรกทอรีสร้างของเราbuild/tools/grunt/)

ขณะนี้มีความเป็นไปได้ที่จะเพิ่มคำสั่งหรือสคริปต์พิเศษก่อนหรือหลังเหตุการณ์นักแต่งเพลงบางอย่าง เราสามารถขอเข้าpost-install-cmdร่วมกิจกรรมของนักแต่งเพลงเพื่อคัดลอกไฟล์เหล่านี้ในเวอร์ชันหลักของวีโอไอพี คุณควรเพิ่มสิ่งนี้ลงในโครงการของคุณcomposer.json:

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

สิ่งนี้จะแสดง:

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

ธีมเป็นโมดูลผู้แต่ง

เช่นเดียวกับmagento/magento2-baseแพคเกจคือการจับคู่ไฟล์ลงในรูทของโครงการ (ดังที่อธิบายไว้ด้านบน) คุณสามารถทำได้ด้วยตัวเอง

คุณสามารถใส่ธีมของคุณในแพ็คเกจนักแต่งเพลงแยกต่างหาก คุณจะต้องสร้างที่เก็บแยกต่างหากสำหรับสิ่งนี้ เอกสาร Magento กำลังอธิบายขั้นตอนนี้แล้ว: ดู"สร้างธีมของคุณเป็นแพ็คเกจนักแต่งเพลง"

ตอนนี้เพิ่มสิ่งนี้ในcomposer.jsonไฟล์ธีมของคุณ:

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

ตรวจสอบให้แน่ใจว่าพา ธ แรกชี้ไปยังตำแหน่งที่ถูกต้องภายในแพ็คเกจธีมของคุณ พา ธ สัมพันธ์จากตำแหน่งของcomposer.jsonไฟล์ของธีม

คำเตือน:
ทั้งสองวิธีเป็นการเขียนทับไฟล์หลัก สิ่งนี้อาจทำให้เกิดการแก้ไขหรืออัปเกรดปัญหา เมื่อทำการแพตช์และอัพเกรดคุณควรตรวจสอบสิ่งที่จะมีการเปลี่ยนแปลงและนำการเปลี่ยนแปลงเหล่านั้นไปใช้กับสำเนาของไฟล์หลักเหล่านี้

• นี่คือคำตอบเพิ่มเติมสำหรับคำตอบของJev Mokrousov
• เขียนขึ้นสำหรับ Magento 2.1 (ฉันบอก Magento 2.2 ว่าจะมีวิธีแก้ปัญหาที่ดีกว่านี้)

ในขณะที่ฉันมั่นใจว่าหลายคนจะพบว่าตัวเองกำลังขยายธีมหลักแทนที่จะสร้างธีมอย่างสมบูรณ์ตั้งแต่เริ่มต้นนี่เป็นไวยากรณ์ที่แตกต่างกันเล็กน้อยสำหรับthemes.yourThemeName.jsไฟล์ของคุณ แทนที่จะกำหนดอย่างสมบูรณ์ตั้งแต่เริ่มต้นการกำหนดค่าสำหรับชุดรูปแบบของเราเรารับมาจากผู้ปกครองแล้วผนวก / แก้ไขสิ่งที่ใหม่ / แตกต่างกัน

ในตัวอย่างนี้เรากำลังสืบทอดจากการกำหนดค่าของเปล่าตั้งชื่อธีมของเราและเพิ่มไฟล์รูทเพิ่มเติมของธีม ข้อดีของการทำเช่นนี้คือคุณไม่จำเป็นต้องประกาศไฟล์ทั้งหมดจากธีมหลัก สำหรับคนที่ขยายธีมผู้ปกครองที่ได้รับการปรับปรุงเป็นระยะนี้อาจเป็นประโยชน์ (การใช้ blank เป็นตัวอย่างสถานการณ์ของฉันที่นี่อาจไม่ใช่สถานการณ์ที่เหมาะสมที่สุด แต่แนวคิดที่นำมาใช้ที่นี่เป็นสิ่งสำคัญ)

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