Wie funktioniert Magento 2 mit CSS Grunt-Autoprefixer?

9

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
Stechpalme
quelle

Antworten:

5
  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.
Igloczek
quelle
Laufen grunt autoprefixerabgebrochen, ohne die Nachricht zu vervollständigen Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead. Was deutet darauf hin, dass Magento das automatische Präfixieren überhaupt nicht unterstützt?
Holly
Selbst wenn Grunt so eingerichtet wäre, dass es in der Bereitstellungspipeline ausgeführt wird, wäre es nicht zuverlässig, wenn ein Administrator den CSS-Cache geleert hätte.
Holly
Wie ist es auch möglich, eine Grunzaufgabe in einer .jsonDatei einzurichten ? Muss Grunt nicht in einer .jsDatei eingerichtet werden
Holly
1. Es funktioniert, das ist nur eine Abwertungswarnung. Nur wenige Zeilen weiter unten finden Sie Informationen zu verarbeiteten Dateien.
Igloczek
2. Der Cache entfernt keine Dateien im Themenverzeichnis pub, daher ist er 100% sicher.
Igloczek
5

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

gelanivishal
quelle
Sie sollten dies als PR an den Core
senden
0

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.

user2864591
quelle