1

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

经过一番折腾之后，我实际上得到了这个工作，这对我来说非常神奇，因为我是一个绝对的节点、咕噜声和终端初学者。
在autoprefixer 文档中，它说可以配置要支持的浏览器，作为解释，给出了这行代码： 

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);

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

4

2 回答 2

3

您需要全局安装 autoprefixer 以具有autoprefixer命令：

sudo npm install -g autoprefixer
autoprefixer -i
于 2013-10-24T16:32:41.523 回答
2

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

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

于 2013-11-13T11:31:35.640 回答