¿Cómo funciona Magento 2 con CSS grunt-autoprefixer?

Al observar una nueva instalación de Magento 2 (v2.1.8), veo en sus archivos Gruntfile.jsy package.jsonque Magento está utilizando grunt-autoprefixer

1. Esto es genial, los correctores automáticos CSS son realmente útiles. Pero no puedo ver cómo usarlo con el Gruntfile de Magento, ¿alguien tiene una idea de cómo funciona?
2. Además, ¿cómo funcionaría esto en modo de producción en un entorno en vivo? El uso de Magento2 no utiliza un compilador PHP LESS en modo de producción, mientras que Grunt solo se usa para desarrollar con.

Gruntfile.js

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

package.json

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

Corrí grunt autoprefixery tampoco parece funcionar.

$ 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. Personalizar dev/tools/grunt/configs/autoprefixer.jsony ejecutar grunt autoprefixer.
2. Debe configurarlo manualmente en la tubería de implementación, b / c no hay forma de ejecutar tareas Grunt desde Magento.

Realice los cambios anteriores, espero que funcione bien.

package.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"]
    }
}

Después de configurar los archivos anteriores, ejecute grunt autoprefixer

Para ser muy claro para todos: postcss.js y postcss.json - vaya a / dev / tools / grunt / configs package.json - en la raíz del sitio web - solo verifique que incluye el corrector automático en devDependencies

Una vez hecho esto, ejecute exec / less / watch / setup de la forma habitual.

Luego acceda a su sitio web en un navegador para crear los archivos de caché CSS.

luego, ejecute: grunt autoprefixer

esto verificará los archivos CSS resultantes y agregará -webkit- y otro soporte de navegador

Esta es una buena solución para el desarrollo, pero no he encontrado una manera de usar esto en la producción.