节点/Grunt-Autoprefixer-如何将配置添加到我的Gruntfile.js&如何检查支持的浏览器?

问题描述

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

I want to start using the CSS post-processor called autoprefixer (https://github.com/ai/autoprefixer).

经过一番杂耍之后，我实际上完成了这项工作，这对我来说真是太了不起了，因为我是一个绝对的节点，咕and声和终端初学者.
在 autoprefixer文档中，它说一个人可以配置要支持的浏览器，因为这行代码的解释是给出:

After a bit of juggling things around I actually got this working which is quite amazing to me since I am an absolute node, grunt and terminal beginner.
In the autoprefixer documentation it says one can configure which browsers to support, as explanation this line of code is given:

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

但是我应该把这段代码放在哪里?我尝试将其粘贴到我的Gruntfile的底部，但没有成功.该文件如下所示:

But where do I put this code? I tried to paste it into the bottom my Gruntfile without success. The file looks like this:

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

我还尝试过这样添加它:

I also tried to add it like this:

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

这肯定会影响CSS输出，但是我不确定它是否正确?

This has definitely an influence on the CSS output, but I am not sure if it is correct?

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

Also, when I type autoprefixer -i into the command line to check for my config, the output is -bash: autoprefixer: command not found. The same goes for grunt-autoprefixer -i. How can I fix this? I would love to see the versions I support.
Another variation is to do it like this:

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

再说一遍，将这段代码放在哪里?

But again, where to put this code?

推荐答案

您需要全局安装自动前缀以具有autoprefixer命令:

You need to global install autoprefixer to has autoprefixer command:

sudo npm install -g autoprefixer
autoprefixer -i

这篇关于节点/Grunt-Autoprefixer-如何将配置添加到我的Gruntfile.js&如何检查支持的浏览器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！