Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

问题

I want to start using the CSS post-processor called autoprefixer (https://github.com/ai/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);

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'
        }
 },

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

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?

回答1:

You need to global install autoprefixer to has autoprefixer command:

sudo npm install -g autoprefixer
autoprefixer -i

回答2:

Now you can use Autoprefixer binary from the project folder without globally installed Autoprefixer (don't forget to update grunt-autoprefixer to v0.4.1).

Here you can find browsers option description. Options can be target- or task-specific, and target-specific options can override task-specific.

来源：https://stackoverflow.com/questions/19281182/node-grunt-autoprefixer-how-to-add-configuration-to-my-gruntfile-js-how-to

标签

javascript

css

node.js

gruntjs

vendor-prefix