Wie funktioniert Magento 2 mit CSS Grunt-Autoprefixer?

Wenn ich mir eine Neuinstallation von Magento 2 (v2.1.8) ansehe, sehe ich aus deren Gruntfile.jsund package.jsonDateien, dass Magento den Grunt-Autoprefixer verwendet

1. Das ist großartig, CSS-Autoprefixer sind wirklich nützlich. Aber ich kann nicht sehen, wie man es mit Magentos Gruntfile benutzt. Hat jemand eine Idee, wie es funktioniert?
2. Wie würde dies im Produktionsmodus in einer Live-Umgebung funktionieren? Verwendet Magento2 keinen PHP WENIGER Compiler im Produktionsmodus, während Grunt nur für die Entwicklung mit verwendet wird.

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",

Ich bin gelaufen grunt autoprefixerund es scheint auch nicht zu funktionieren.

$ 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. Anpassen dev/tools/grunt/configs/autoprefixer.jsonund ausführen grunt autoprefixer.
2. Sie müssen es manuell in Ihrer Bereitstellungspipeline einrichten. B / C gibt es keine Möglichkeit, Grunt-Aufgaben von Magento aus auszuführen.

Bitte führen Sie die obigen Änderungen durch, ich hoffe, es wird gut funktionieren.

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

Führen Sie nach dem Einrichten der obigen Dateien aus grunt autoprefixer

Um wirklich für alle klar zu sein: postcss.js & postcss.json - gehen Sie in / dev / tools / grunt / configs package.json - im Website-Stammverzeichnis - überprüfen Sie einfach, ob es unter devDependencies Autoprefixer enthält

Sobald Sie fertig sind, führen Sie exec / less / watch / setup wie gewohnt aus.

Greifen Sie dann in einem Browser auf Ihre Website zu, um die CSS-Cache-Dateien zu erstellen.

Führen Sie dann: grunt autoprefixer aus

Dadurch werden die resultierenden CSS-Dateien überprüft und -webkit- und andere Browserunterstützung hinzugefügt

Dies ist eine gute Lösung für die Entwicklung, aber ich habe keinen Weg gefunden, dies in der Produktion zu verwenden.