Magento 2 thêm chủ đề mới mà không thay đổi tập tin cốt lõi. Tiếng càu nhàu

Làm cách nào để mở rộng cấu hình Magento 2 Grunt mặc định mà không cần chạm / chỉnh sửa các tệp lõi như Gruntfile.jsvà dev/tools/grunt/configs/themes.js?

Tạo chủ đề mới cho Magento 2 có thể là một thách thức thậm chí có kinh nghiệm với Magento trước đây. Các nhà phát triển Decent sẽ không thay đổi các tệp Magento cốt lõi, nhưng thay vào đó, hãy tạo "trình bao bọc", vì vậy trong các bản vá cài đặt và thực hiện các bản cập nhật trong tương lai, bạn sẽ không gặp phải trường hợp nào khi tất cả các thay đổi của bạn bị ghi đè hoặc được hợp nhất không chính xác.

Mở rộng các tệp Gruntfile.js và Themes.js

Giả sử bạn đã tạo chủ đề mới và như chúng tôi biết từ tài liệu Magento 2, bạn sẽ cần thay đổi tệp dev/tools/grunt/configs/themes.jsthêm chủ đề của mình vào danh sách, để Grunt có thể biên dịch / symlink / sao chép tập tin css / less vào pub/staticthư mục.

Bước 1: Tạo /dev/tools/grunt/configs/themes.yourthemename.jstệp mở rộng themes.jstệp mặc định là

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

Bước2: Mở rộng Gruntfile.jsvới tệpGruntfile.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);

Bước 3: Bây giờ bạn có thể chạy các tác vụ Grunt cho chủ đề của mình như:

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

Khi Jev Mokrousov giải pháp của không phù hợp với bạn, có hai cách bạn có thể thử:

Lệnh cài đặt bài tổng hợp

Trong quá trình cài đặt magento/magento2-basegói, tệp Gruntfile.jsvà thư mục dev/toolssẽ được sao chép từ gói vào thư mục gốc của bạn ghi đè lên bất kỳ tệp nào hiện có, do composer.jsonánh xạ cơ sở Magento2 (xem vendor/magento/magento2-base/composer.jsontrong dự án của bạn):

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

Bạn có thể đặt các phiên bản của mình Gruntfile.jsvà dev/tools/grunt/configs/themes.jsở đâu đó (chúng tôi đã đặt chúng trong cấu trúc thư mục xây dựng của chúng tôi build/tools/grunt/).

Bây giờ có khả năng thêm các lệnh hoặc tập lệnh bổ sung trước hoặc sau các sự kiện Trình soạn thảo nhất định. Chúng tôi có thể tham gia vào post-install-cmdsự kiện của Nhà soạn nhạc để sao chép các phiên bản của các tệp này qua các tệp cốt lõi của Magento. Bạn nên thêm nó vào dự án của bạn composer.json:

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

Điều này sẽ cho bạn thấy:

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

Chủ đề như một mô-đun soạn thảo

Giống như magento/magento2-basegói đang ánh xạ các tệp vào thư mục gốc của dự án (như được mô tả ở trên), bạn cũng có thể tự làm điều này.

Bạn có thể đặt chủ đề của mình trong gói Trình soạn nhạc riêng biệt. Bạn sẽ cần phải tạo một kho lưu trữ riêng cho việc này. Các tài liệu Magento đã mô tả quá trình này: xem "Biến chủ đề của bạn thành gói Trình soạn thảo"

Bây giờ thêm điều này trong chủ đề của bạn composer.json tập tin :

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

Đảm bảo đường dẫn đầu tiên trỏ đến đúng vị trí trong gói chủ đề của bạn. Các đường dẫn tương đối từ vị trí của chủ đềcomposer.json tệp .

Cảnh báo:
Cả hai giải pháp đều ghi đè tập tin lõi. Điều này có thể gây ra vấn đề vá hoặc nâng cấp. Khi vá và nâng cấp, bạn phải luôn kiểm tra những gì sẽ được thay đổi và áp dụng những thay đổi đó trên các bản sao của các tệp cốt lõi này.

• Đây là một câu trả lời bổ sung cho câu trả lời của Jev Mokrousov.
• Viết cho Magento 2.1 (Tôi đã nói với Magento 2.2 sẽ có các giải pháp được xây dựng tốt hơn cho vấn đề này)

Vì tôi chắc chắn nhiều người sẽ thấy mình mở rộng một chủ đề gốc hơn là xây dựng hoàn toàn một chủ đề từ đầu, đây là một số cú pháp hơi khác nhau được cung cấp cho bạnthemes.yourThemeName.js tệp . Thay vì xác định hoàn toàn từ đầu cấu hình cho chủ đề của chúng tôi, chúng tôi thừa hưởng nó từ cha mẹ, sau đó nối / sửa đổi những gì mới / khác nhau.

Trong ví dụ này, chúng tôi đang kế thừa từ cấu hình trống, đặt tên chủ đề của chúng tôi và thêm (các) tệp gốc bổ sung của chủ đề. Một lợi ích cho điều này là bạn không phải khai báo cụ thể tất cả các tệp từ chủ đề gốc. Đối với những người mở rộng chủ đề phụ huynh nhận được cập nhật định kỳ, điều này có thể có lợi. (Sử dụng trống làm kịch bản ví dụ của tôi ở đây có lẽ không phải là tình huống có thể áp dụng nhất, nhưng các khái niệm được áp dụng ở đây mới là vấn đề quan trọng).

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