javascript - Node/Grunt - Autoprefixer - 如何将配置添加到我的 Gruntfile.js 以及如何检查支持的浏览器？

Question

我想开始使用名为 autoprefixer ( https://github.com/ai/autoprefixer ) 的 CSS 后处理器。

经过一些周旋之后，我实际上得到了这个工作，这对我来说是相当惊人的，因为我是一个绝对的 Node 、咕噜和终端初学者。
在autoprefixer documentation它说可以配置要支持的浏览器，因为给出了这行代码的解释:

autoprefixer("last 1 version", "> 1%", "ie 8", "ie 7").compile(css);

但是我应该把这段代码放在哪里呢？我试图将它粘贴到我的 Gruntfile 底部，但没有成功。该文件如下所示:

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                files: {
                    'build/style.css': 'style.css'
                }
            }
        },
        watch: {
            styles: {
                files: ['style.css'],
                tasks: ['autoprefixer']
            }
        }
    });
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

我也试过这样添加:

autoprefixer: {
    options: {
      browsers: ["last 10 version", "> 1%", "ie 8", "ie 7"]
    },
    dist: {
        files: {
            'build/style.css': 'style.css'
        }
 },

这肯定对 CSS 输出有影响，但我不确定它是否正确？

此外，当我在命令行中键入 autoprefixer -i 以检查我的配置时，输出为 -bash: autoprefixer: command not found。 grunt-autoprefixer -i 也是如此。我怎样才能解决这个问题？我很想看看我支持的版本。
另一种变体是这样做的:

inspect = autoprefixer("last 1 version").inspect();
console.log(inspect);

但是再一次，把这段代码放在哪里？

Answer 1

您需要全局安装 autoprefixer 才能使用 autoprefixer 命令:

sudo npm install -g autoprefixer
autoprefixer -i