Question

我想开始使用名为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);

但是，再次提到这段代码？

Answer 1

您需要使用autoprefixer命令全局安装autoprefixer：

sudo npm install -g autoprefixer
autoprefixer -i

Answer 2

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

Here您可以找到browsers选项说明。选项可以是特定于目标或任务的，特定于目标的选项可以覆盖特定于任务的任务。

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

2 个答案: