Comment fonctionne Magento 2 avec CSS grunt-autoprefixer

9

En regardant une nouvelle installation de Magento 2 (v2.1.8), je vois sur leurs fichiers Gruntfile.jset package.jsonque Magento utilise grunt-autoprefixer

  1. C'est super, les autoprefixeurs CSS sont vraiment utiles. Mais je ne vois pas comment l'utiliser avec le Gruntfile de Magento, est-ce que quelqu'un a une idée de comment cela fonctionne?
  2. De plus, comment cela fonctionnerait-il en mode production sur un environnement réel? Magento2 n'utilise-t-il pas un compilateur PHP LESS en mode production, tandis que Grunt est juste utilisé pour développer avec.

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

J'ai couru grunt autoprefixeret ça ne semble pas marcher non plus.

$ 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
houx
la source

Réponses:

5
  1. Personnalisez dev/tools/grunt/configs/autoprefixer.jsonet exécutez grunt autoprefixer.
  2. Vous devez le configurer manuellement dans votre pipeline de déploiement, b / c il n'y a aucun moyen d'exécuter des tâches Grunt à partir de Magento.
igloczek
la source
courir grunt autoprefixeravorté sans terminer avec le message Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead. Ce qui suggère que Magento ne prend pas du tout en charge le préfixe automatique?
Holly
Même si Grunt était configuré pour s'exécuter dans le pipeline de déploiement, il ne serait pas fiable si un utilisateur administrateur vidait le cache CSS.
Holly
De plus, comment est-il possible de configurer une tâche de grognement dans un .jsonfichier? Grunt n'a pas besoin d'être installé dans un .jsfichier
Holly
1. Cela fonctionne, c'est juste un avertissement de dépréciation. Quelques lignes ci-dessous contiennent des informations sur les fichiers traités.
igloczek
2. Le cache ne supprime pas les fichiers du pubrépertoire des thèmes, il est donc 100% sûr.
igloczek
5

Veuillez effectuer les changements ci-dessus, j'espère que cela fonctionnera 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"]
    }
}

Après avoir installé les fichiers ci-dessus, exécutez grunt autoprefixer

gelanivishal
la source
Vous devez soumettre cela en tant que PR au noyau, en remplacement de la configuration obsolète actuelle
igloczek
0

Pour être vraiment clair pour tout le monde: postcss.js & postcss.json - allez dans / dev / tools / grunt / configs package.json - à la racine du site Web - vérifiez simplement qu'il inclut le préfixe automatique sous devDependencies

Une fois cela fait, exécutez exec / less / watch / setup de la manière habituelle.

Accédez ensuite à votre site Web dans un navigateur pour créer les fichiers de cache CSS.

puis exécutez: grunt autoprefixer

cela vérifiera les fichiers css résultants et ajoutera -webkit- et tout autre support du navigateur

C'est une bonne solution pour le développement mais je n'ai pas trouvé de moyen de l'utiliser en production.

user2864591
la source