Grunt插件autoprefixer使用指南

在grunt安装、配置和应用中，我介绍了几种插件的使用。今天再介绍一个为兼容各大浏览器自动添加前缀的插件autoprefixer。

要想使用它得先安装 Browserslist caniuse-db num2fraction 等插件，具体安装方法见上一篇文章。

该插件的github地址为：autoprefixer
环境配置好了后，gruntfile.js文件配置如下：

module.exports = function(grunt){
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        autoprefixer:{
            options:{
                //任务设置
                browserslist:['last 2 versions','chrome','ie'],
                map:true,
            },
            single_file: {
                src: 'css/test.css',
                dest: 'result/test.css'
            },
        }
    });
    grunt.registerTask('default',[]);
};

这里的options.browserslist是兼容的浏览器类型，
Single_file则指的是单个css任务。Src是源文件，dest是目标文件。
源文件内容如下：

.class { transform:rotate(20deg); transition: 1s; background-image: linear-gradient(to bottom, #444444, #999999); }

我们执行任务后：

目标文件变为：

.class { -webkit-transform:rotate(20deg); -ms-transform:rotate(20deg); transform:rotate(20deg); -webkit-transition: 1s; transition: 1s; background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: linear-gradient(to bottom, #444444, #999999); }

可以看到，兼容了ie和chrome浏览器。
当然，除了single_file这个单文件任务，还可以选择其他任务，具体参考：
gruntfile.js的demo

我们再以其中的多文件任务来示例，其gruntfile.js文件配置如下：

module.exports = function(grunt){
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        autoprefixer:{
            options:{
                //任务设置
                browserslist:['last 2 versions','chrome','ie'],
                map:true,
            },
            //单文件任务
            single_file: {
                src: 'css/test.css',
                dest: 'result/test.css'
            },
            //多文件任务
            mutiple_files: {
                expand: true,
                flatten: true,//是否取代原先文件名
                src: 'cssB/*.css',
                dest: './resultB/'
            }
        }
    });
    grunt.registerTask('default',[]);
};

执行后就将cssB文件夹下的css文件全部兼容性处理后转入resultB文件夹：

还有很多其他的任务，同学们可以自行查阅上文提到的demo。