如何处理CSS3属性前缀

Grunt中配置Autoprefixer
假设你的环境中已具备了Grunt的运行环境，如果没有请先移步Grunt官网了解，这里不做过多阐述。

在Github中有一个grunt-autoprefixer的插件，按照其官方提示，我在命令行中执行了下面的语句：

npm install grunt-autoprefixer --save-dev

命令终端提示：



似乎没有成功（其实我也不太懂Grunt，只是临阵磨枪）。于是我改投@一丝姐姐说的postcss。在命令终端重新输入：

npm install grunt-postcss --save-dev

这下似乎有戏了：



不过我还跟着官网所说的执行了另外一个命令：

npm install grunt-postcss autoprefixer-core csswring

运行命令后可以看到下图的提示信息：



接下来需要在你项目的根目录中配置

Gruntfile.js

文件：

'use strict';
module.exports = function(grunt) {

// Dynamically loads all required grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

var autoprefixer = require('autoprefixer-core');

// Configures the tasks that can be run
grunt.initConfig({
postcss: {
options: {
processors: [
autoprefixer({ browsers: ['last 2 version'] }).postcss
]
},
// dist: {
//  src: 'src/css/*.css',
//  dest:'dest/css/*.css'
// }
multiple_files: {
expand: true,
flatten: true,
src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
},
},
});

grunt.loadNpmTasks('grunt-postcss');

grunt.registerTask('default', ['postcss']);

};

为了验证这样做是否正确，我在项目中的

src/css/

中创建了一个

main.css

文件，然后输入代码：

a {
transition: all .2s ease .1s;
transform: rotate(45deg) translateY(200px);
}

在命令终端执行：

grunt

终端将运行：

Running "postcss:multiple_files" (postcss) task
File dest/css/main.css created.

Done, without errors.

查看项目中自动创建了一个

dest/css/main.css

文件，而里面的代码：

a {
transition: all .2s ease .1s;
-webkit-transform: rotate(45deg) translateY(200px);
transform: rotate(45deg) translateY(200px);
}

正是我需要的样式代码。这样尝试一回，觉得比使用Sass中的mixin爽多了。

Gulp中配置Autoprefixer

除了Grunt可以配置Autoprefixer之外，还可以使用Gulp来配置。这里也假设你的项目中已具备了Gulp的运行环境，如果没有，可以查阅Gulp官网相关资料。

根据gulp-autoprefixer官网提示，我在命令终端输入了：

npm install gulp-autoprefixer --save-dev

在终端中可以看到这样的提示信息：



在Grunt中需要在

Gruntfile.js

进行配置，而在Gulp中也有点类似，需要在

gulpfile.js

中进行配置：

// include gulp
var gulp = require('gulp');

// include plug-ins
var autoprefix = require('gulp-autoprefixer');

// JS hint task
gulp.task('styles', function() {
gulp.src(['./src/styles/*.css'])
.pipe(autoprefix('last 2 versions'))
.pipe(gulp.dest('./build/styles'));
});

看上去要比

Gruntfile.js

配置简单一些。为了验证操作是否正确，我在项目中创建了

src/styles/style.css

,并且在

style.css

文件中输入了：

a {
transform: translateY(20px) rotate(45deg);
}

接下来在命令终端执行：

gulp styles

看到如下提示信息：

[12:53:26] Using gulpfile ~/Sites/test/gulp-autoprefixer/gulpfile.js
[12:53:26] Starting 'styles'...
[12:53:26] Finished 'styles' after 7.26 ms

此时，在项目中会自动创建一个

build/styles/style.css

文件，打开这个文件查看代码：

a {
-webkit-transform: translateY(20px) rotate(45deg);
-ms-transform: translateY(20px) rotate(45deg);
transform: translateY(20px) rotate(45deg);
}

正是我们需要的。

其实在PostCSS也提供了有关于如何在Gulp中配置Autoprefixer的说明。感兴趣的同学可以看看。

有了Autoprefixer这样的工具对于处理CSS3属性前缀来说就不再是头痛的事情了。当然，如果你正在使用CSS预处理器编写代码，那么也可以很完美的结合Autoprefixer去处理。