Magento 2 hoạt động như thế nào với CSS grunt-autoprefixer

Từ việc xem bản cài đặt mới của Magento 2 (v2.1.8), tôi thấy từ các tệp Gruntfile.jsvà package.jsonMagento của họ đang sử dụng grunt-autoprefixer

1. Điều này thật tuyệt, CSS autoprefixers thực sự hữu ích. Nhưng tôi không thể thấy cách sử dụng nó với Gruntfile của Magento, có ai biết nó hoạt động như thế nào không?
2. Ngoài ra, làm thế nào điều này sẽ làm việc trong chế độ sản xuất trên một môi trường sống? Không Magento2 sử dụng trình biên dịch LESS PHP trong chế độ sản xuất, trong khi Grunt chỉ được sử dụng để phát triển.

Gruntfile.js

/**
 * Production preparation task.
 */
prod: function (component) {
    var tasks = [
        'less',
        'autoprefixer',
        'cssmin',
        'usebanner'
    ]

pack.json

"devDependencies": {
    "glob": "^5.0.14",
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^2.0.0",

Tôi đã chạy grunt autoprefixervà nó dường như không hoạt động.

$ grunt autoprefixer
Running "autoprefixer:setup" (autoprefixer) task
Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead
File setup/pub/styles/setup.css created.

Running "autoprefixer:updater" (autoprefixer) task
Warning: No source files were found. Use --force to continue.

Aborted due to warnings.


Execution Time (2017-10-29 11:12:01 UTC-0)
loading tasks               145ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 30%
loading grunt-autoprefixer  118ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 24%
autoprefixer:setup          216ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 45%
autoprefixer:updater          5ms  ▇▇ 1%
Total 485ms

1. Tùy chỉnh dev/tools/grunt/configs/autoprefixer.jsonvà chạy grunt autoprefixer.
2. Bạn cần thiết lập thủ công trong đường ống triển khai, vì không có cách nào để chạy các tác vụ Grunt từ Magento.

Hãy thực hiện các thay đổi ở trên, tôi hy vọng nó sẽ hoạt động tốt.

pack.json

{
  "name": "Project",
  "author": "Vendor",
  "description": "Node modules dependencies for local development",
  "version": "2.0.0",
  "license": "(OSL-3.0 OR AFL-3.0)",
  "repository": {
    "type": "git",
    "url": "https://github.com/magento/magento2.git"
  },
  "homepage": "http://magento.com/",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "glob": "^5.0.14",
    "grunt": "^0.4.5",
    "grunt-banner": "^0.4.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jasmine": "^0.8.1",
    "grunt-contrib-less": "^0.12.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-eslint": "17.3.1",
    "grunt-exec": "^0.4.6",
    "grunt-jscs": "2.2.0",
    "grunt-postcss": "^0.8.0",
    "grunt-replace": "^0.9.2",
    "grunt-styledocco": "^0.1.4",
    "grunt-template-jasmine-requirejs": "^0.2.3",
    "grunt-text-replace": "^0.4.0",
    "imagemin-svgo": "^4.0.1",
    "load-grunt-config": "^0.16.0",
    "morgan": "^1.5.0",
    "node-minify": "^1.0.1",
    "path": "^0.11.14",
    "serve-static": "^1.7.1",
    "strip-json-comments": "^1.0.2",
    "time-grunt": "^1.0.0",
    "underscore": "^1.7.0"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

postcss.js

/**
 * PostCSS autoprefixer initialisation
 *
 * Docs: https://github.com/postcss/autoprefixer
 * Config: dev/tools/grunt/configs/postcss.json
 * Usage: grunt autoprefixer:themename [--verbose] [--debug]
 * To do: load src from themes.js
 *
 * @param grunt
 */

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-postcss');

    grunt.registerTask('autoprefixer', function (target) {
        var currentTarget = target || 'dist';

        /*** configuration tweaks ***/
        var config = grunt.config.get('postcss');

        // set 'processors' options (not possible to set function in json config)
        config['options'].processors = [require('autoprefixer')({browsers: ['last 2 versions']})];

        // apply theme source and destination dynamically
        if (target) {
            config[target] = {
                src: ['pub/static/frontend/*/'+target+'/*/css/*.css']
            };
        }
        grunt.config.set('postcss', config);

        grunt.option('force', true);
        grunt.task.run('postcss:'+currentTarget);
    });
};

postcss.json

{
    "options": {
        "map": true
    },
    "dist": {
      "src": ["pub/static/frontend/*/*/*/css/*.css"]
    }
}

Sau khi thiết lập các tập tin trên, hãy chạy grunt autoprefixer

Để thực sự rõ ràng cho mọi người: postcss.js & postcss.json - truy cập / dev / tools / grunt / configs pack.json - trong thư mục gốc của trang web - chỉ cần kiểm tra nó bao gồm autoprefixer trong devDependencies

Sau khi thực hiện xong chạy exec / less / watch / setup theo cách thông thường.

Sau đó truy cập trang web của bạn trong trình duyệt để tạo các tệp bộ đệm CSS.

sau đó, chạy: grunt autoprefixer

điều này sẽ kiểm tra các tệp css kết quả và thêm -webkit- và hỗ trợ trình duyệt khác

Đây là một sửa chữa tốt để phát triển nhưng tôi chưa tìm thấy cách sử dụng nó trong sản xuất.