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

【问题标题】：Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?Node/Grunt - Autoprefixer - 如何将配置添加到我的 Gruntfile.js 以及如何检查支持的浏览器？
【发布时间】：2013-10-09 19:45:47
【问题描述】：

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

经过一番折腾之后，我实际上得到了这个工作，这对我来说非常神奇，因为我是一个绝对的节点、咕噜声和终端初学者。
在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);

但同样，这段代码应该放在哪里？

【问题讨论】：

标签： javascript css node.js gruntjs vendor-prefix

【解决方案1】：

您需要全局安装 autoprefixer 才能拥有autoprefixer 命令：

sudo npm install -g autoprefixer
autoprefixer -i

【讨论】：

哇，Andrey Sitnik 亲自回答了我的问题，谢谢！我现在每天都在各种项目中使用 Autoprefixer，并将它介绍给我的团队，每个人都喜欢它，干得好！

【解决方案2】：

现在您可以在没有全局安装 Autoprefixer 的情况下使用项目文件夹中的 Autoprefixer 二进制文件（不要忘记将 grunt-autoprefixer 更新到 v0.4.1）。

Here你可以找到browsers选项描述。选项可以是特定于目标或任务的，特定于目标的选项可以覆盖特定于任务的。

【讨论】：