如何处理CSS3属性前缀_css filter prefix-CSDN博客

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

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

npm install grunt-autoprefixer --save-dev

命令终端提示：

grunt autoprefixer

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

npm install grunt-postcss --save-dev

这下似乎有戏了：

postcss autoprefixer

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

npm install grunt-postcss autoprefixer-core csswring

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

postcss autoprefixer

接下来需要在你项目的根目录中配置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

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

gulp autoprefixer

在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);
}