Come funziona Magento 2 con CSS grunt-autoprefixer

Guardando una nuova installazione di Magento 2 (v2.1.8) vedo dai loro Gruntfile.jse dai package.jsonfile che Magento sta usando grunt-autoprefixer

Questo è fantastico, gli autoprefixer CSS sono davvero utili. Ma non riesco a vedere come usarlo con il Gruntfile di Magento, qualcuno ha idea di come funziona?
Inoltre, come funzionerebbe in modalità di produzione in un ambiente live? Magento2 non usa un compilatore PHP LESS in modalità di produzione, mentre Grunt è usato solo per lo sviluppo.

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

Ho corso grunt autoprefixere non sembra funzionare neanche.

$ 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

— Agrifoglio
fonte

Risposte:

Personalizza dev/tools/grunt/configs/autoprefixer.jsoned esegui grunt autoprefixer.
È necessario configurarlo manualmente nella pipeline di distribuzione, b / c non c'è modo di eseguire attività Grunt da Magento.

— igloczek
fonte

esecuzione grunt autoprefixerinterrotta senza completamento con il messaggio

Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead

. Il che suggerisce che Magento non supporta affatto il prefisso automatico?

— Holly

Anche se Grunt fosse configurato per l'esecuzione nella pipeline di distribuzione, non sarebbe affidabile se un utente amministratore cancellasse la cache CSS.

— Holly

Inoltre, come è possibile impostare un'attività grunt in un .jsonfile? Grunt non deve essere impostato in un .jsfile

— Holly,

1. Funziona, è solo un avvertimento di deprecazione. Poche righe di seguito sono disponibili informazioni sui file elaborati.

— igloczek,

2. La cache non rimuove i file nella pubdirectory dei temi, quindi è sicura al 100%.

— igloczek,

Si prega di eseguire le modifiche sopra, spero che funzionerà bene.

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

Dopo l'installazione sopra i file, esegui grunt autoprefixer

— gelanivishal
fonte

Dovresti

— inviarlo

Per essere davvero chiari per tutti: postcss.js e postcss.json - vai in / dev / tools / grunt / configs package.json - nella radice del sito web - controlla che includa autoprefixer sotto devDependencies

Una volta fatto eseguire exec / less / watch / setup come di consueto.

Quindi accedi al tuo sito Web in un browser per creare i file di cache CSS.

quindi, esegui: grunt autoprefixer

questo controllerà i file CSS risultanti e aggiungerà -webkit- e altri supporti per il browser

Questa è una buona soluzione per lo sviluppo, ma non ho trovato un modo per usarlo in produzione.

— user2864591
fonte