处理CSS前缀问题的神器——AutoPrefixer

What is AutoPrefixer

Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

How to use AutoPrefixer

介绍了这么多，如果用起来很麻烦，那还不如直接手写，而AutoPrefixer的另一大特点就是使用简便，现在来说说怎么用。

AutoPrefixer可以简单的通过下载plugin配置到Sublime，Brackets或Atom等IDE里，而在WebStorm中无法通过plugin直接安装和使用AutoPrefixer，需要通过External Tools或File Watchers来实现，详细的在WebStorm中如何安装可以参考 这篇文章。

如果单单只能通过IDE才能使用这个功能，那它远称不上神器，真正让其拥有神器之名的原因是：它可以很简单、有效地同现有的打包工具（gulp, webpack等）一同使用，来完成对项目中所有的css文件中的属性添加前缀。

下面，我们就分别来看在这两种打包工具下如何使用AutoPrefixer。

• gulp
  在gulp中，可以使用 AutoPrefixer官网 推荐的postcss + autoprefixer两个插件的组合，也可以通过gulp-autoprefixer这一个插件。

// Method 1: postcss + autoprefixergulp.task(‘autoprefixer‘, function () { ????var postcss = require(‘gulp-postcss‘); ???var sourcemaps = require(‘gulp-sourcemaps‘); ???var autoprefixer = require(‘autoprefixer‘); ???return gulp.src(‘./src/*.css‘) ?????.pipe(sourcemaps.init()) ?????.pipe(postcss([ autoprefixer({ browsers: [‘last 2 versions‘] }) ])) ?????.pipe(sourcemaps.write(‘.‘)) ?????.pipe(gulp.dest(‘./dest‘));});// Method 2: gulp-autoprefixergulp.task(‘autoprefixer‘, function () { ????var autoprefixer = require(‘gulp-autoprefixer‘); ???return gulp.src(‘./src/*.css‘) ?????.pipe([ autoprefixer({ browsers: [‘last 2 versions‘] }) ]) ?????.pipe(gulp.dest(‘./dest‘));});

• webpack（webpack1 的写法）
  而在最近很火的webpack中使用AutoPrefixer更是轻而易举、如虎添翼。
  使用webpack可以通过简单的配置将本文开头提到的sass这样的预处理器同autoprefixer这样的后处理程序结合在一起。

var autoprefixer = require(‘autoprefixer‘);module.exports = { ???module: { ?????loaders: [ ???????{ test: /\.css$/, loader: "style!css!postcss" }, ???????{ test: /\.scss$/, loader: "style!css!postcss!sass" } ?????] ???}, ???postcss: [ autoprefixer({ browsers: [‘last 2 versions‘] })]}

注： 另外webpack还有一个autoprefixer-loader，但npm官网已将其标为【deprecated】，推荐使用上面示例中通过postcss-loader的方式使用autoprefixer。