Question

grunt-autoprefixer表示＆＃34;此项目已弃用，有利于grunt-postcss。＆＃34;所以，我想把它改成grunt-postcss。我Gruntfile.js

grunt-autoprefixer的当前设置

autoprefixer: {
  options: {
    browsers: ['last 1 version']
  },
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/styles/',
      src: '{,*/}*.css',
      dest: '.tmp/styles/'
    }]
  }
},

如果升级到grunt-postcss。如何在Gruntfile.js中编写我的设置？

我在grunt-postcss中看过自述文件，但我没有得到它。似乎某些值无法映射到grunt-postcss的新设置。

Answer 1

它像任何其他postcss处理器一样完成。请参阅此示例：

var autoprefixer = require('autoprefixer-core');     
grunt.initConfig({
      postcss: {
        options: {
          processors: [
            autoprefixer({
              browsers: ['> 0.5%', 'last 2 versions']
            }).postcss
          ]
        },
        dist: {
                files: {
                    'dist/': 'css/*.css'
                }
        }
      }
  });

Answer 2

从2020年开始的警告：

browsers处理器中autoprefixer选项的使用已更改。

现在，您需要将browsers选项移到package.json文件中：

Gruntfile.js

...
processors: [
    ...
    // No autoprefixer 'browsers' option
    require('autoprefixer')(),
    ...
]
...

package.json

{
    ...
    // 'browserslist' option at the end of the file just above the last curly brace
    'browserslist': [
        'last 2 versions',
        '> 0.5%'
    ]
}

请参阅：https://github.com/browserslist/browserslist#browserslist-

（此答案是我在此处的类似答案的一部分：https://stackoverflow.com/a/64079551/12320578）

有效使用postcss-autoprefixer的示例：

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        postcss: {
            options: {
                processors: [
                    require('autoprefixer')({grid: 'autoplace'}),
                ],
                map: {
                    inline: false, // save all sourcemaps as separate files...
                    annotation: 'assets/css/' // ...to the specified directory
                }
            },
            dist: {
                files: {
                    // Generated file target location and source location
                    'assets/css/style.min.css': 'assets/css/style.css',
                    'assets/css/info.min.css': 'assets/css/info.css'
                }
                // or:
                /*files: [
                    {
                        expand: true,
                        src: ['assets/css/*.css', '!**/*.min.css'],
                        ext: '.min.css',
                        extDot: 'first'
                    }
                ]*/
            }
        },
        watch: {
            styles: {
                files: ['assets/css/style.css', 'assets/css/info.css'],
                // or:
                /*files: ['assets/css/*.css', '!assets/css/*.min.css'],*/
                tasks: ['postcss']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-postcss');
};

package.json

{
    ... // Other already existing options
    "browserslist": [
        "last 4 versions",
        "> 0.5%"
    ]
}

请参见https://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

grunt-autoprefixer到grunt-postcss

2 个答案:

从2020年开始的警告：