本文介绍了节点/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&如何检查支持的浏览器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-14 01:13