grunt中的autoprefixer，自动一键补充css3兼容前缀

                       

先检查一下你的grunt版本。

没有的话就要装（请自行百度安装，本文主要讲配置文件和运用）。
安装autoprefixer

npm install grunt-autoprefixer --save-dev
  
  
1

这是我安装成功的文件目录：

newcss和oldcss这里个文件夹是我手动建的，方便以后放新旧css文件。
先看看gruntfile.js这文件的配置（比较重要）：

module.exports = function(grunt){    grunt.loadNpmTasks('grunt-autoprefixer');    grunt.initConfig({        pkg:grunt.file.readJSON('package.json'),        autoprefixer:{            options:{                //任务设置                browserslist:['chrome','ie','firefox'],                map:true,            },            single_file: {                src: 'oldcss/main.css',//需要加前缀的css文件                dest: 'newcss/main.css'//grunt处理后生成的css文件，如果文件夹中没有该文件，则自动创建            },        }    });    grunt.registerTask('default',[]);};
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package.json其实没有什么看得

{    "name" : "SampleGrunt",    "version" : "0.1.0",    "author" : "Liu Fang",    "private" : true,    "devDependencies" : {        "grunt" :                   "~0.4.0"    } }
  
  
1
2
3
4
5
6
7
8
9
10

配置好了gruntfile.js这文件就可以运行了。

grunt autoprefixer
  
  
1

这是处理前main.css的内容：

.class {    transform:rotate(20deg);    transition: 1s;    background-image: linear-gradient(to bottom, #444444, #999999);}a {     width : calc(50% - 2em);     background: red;     border-radius: initial;     transition : transform 1s}
  
  
1
2
3
4
5
6
7
8
9
10
11

这是处理后main.css的内容：

.class {    -webkit-transform:rotate(20deg);            transform:rotate(20deg);    transition: 1s;    background-image: linear-gradient(to bottom, #444444, #999999);}a {     width : calc(50% - 2em);     background: red;     border-radius: initial;     transition : -webkit-transform 1s;     transition : transform 1s}
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14

只要配置好了环境，就是运行一下的事儿。