Bagaimana cara kerja Magento 2 dengan CSS grunt-autoprefixer


9

Dari melihat instalasi baru Magento 2 (v2.1.8) saya melihat dari mereka Gruntfile.jsdan package.jsonfile yang Magento gunakan grunt-autoprefixer

  1. Ini bagus, autoprefixer CSS sangat berguna. Tapi saya tidak bisa melihat bagaimana menggunakannya dengan Magento's Gruntfile, apakah ada yang tahu cara kerjanya?
  2. Juga, bagaimana ini akan bekerja dalam mode produksi di lingkungan hidup? Tidak menggunakan Magento2 menggunakan kompiler PHP KURANG dalam mode produksi, sementara Grunt hanya digunakan untuk pengembangan dengan.

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

Saya berlari grunt autoprefixerdan sepertinya tidak berhasil juga.

$ 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

Jawaban:


5
  1. Kustomisasi dev/tools/grunt/configs/autoprefixer.jsondan jalankan grunt autoprefixer.
  2. Anda perlu mengaturnya secara manual di dalam Anda pipa penyebaran, b / c tidak ada cara untuk menjalankan tugas Grunt dari Magento.

berjalan grunt autoprefixerdibatalkan tanpa dilengkapi dengan pesan Autoprefixer's process() method is deprecated and will removed in next major release. Use postcss([autoprefixer]).process() instead. Yang menunjukkan bahwa Magento sama sekali tidak mendukung awalan otomatis?
Holly

Bahkan jika Grunt sudah diatur untuk berjalan di jalur penyebaran, itu tidak akan dapat diandalkan, jika pengguna admin membersihkan cache CSS.
Holly

Juga, bagaimana mungkin untuk mengatur tugas kasar dalam .jsonfile? Tidakkah Grunt perlu diatur dalam .jsfile
Holly

1. Berhasil, itu hanya peringatan penghinaan. Beberapa baris di bawah ini Anda memiliki info tentang file yang diproses.
igloczek

2. Cache tidak dapat menghapus file di pubdirektori tema, jadi 100% aman.
igloczek

5

Silakan lakukan perubahan di atas, saya harap ini akan berhasil dengan baik.

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

Setelah mengatur file di atas, jalankan grunt autoprefixer


Anda harus mengirimkan ini sebagai PR ke inti, menggantikan pengaturan yang sudah ketinggalan zaman saat ini
igloczek

0

Agar benar-benar jelas bagi semua orang: postcss.js & postcss.json - masuk / dev / tools / grunt / configs package.json - di root situs web - cukup periksa itu termasuk autoprefixer di bawah devDependencies

Setelah selesai jalankan exec / less / watch / setup dengan cara biasa.

Kemudian akses situs web Anda di browser untuk membuat file cache CSS.

lalu, jalankan: grop autoprefixer

ini akan memeriksa file css yang dihasilkan dan menambahkan -webkit- dan dukungan browser lainnya

Ini adalah perbaikan yang bagus untuk pengembangan tetapi saya belum menemukan cara untuk menggunakannya dalam produksi.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.