本文轉(zhuǎn)自該博客項目源碼http://discipled.daoapp.io/#/
眾所周知為兼容所有瀏覽器檬果，有的 CSS 屬性需要對不同的瀏覽器加上前綴稀蟋，然而有時添加一條屬性宦言，需要添加 3~4 條類似的屬性只是為了滿足瀏覽器的兼容蔽氨，這不僅會增加許多的工作量玉雾，還會使得你的思路被打斷融师。
如何解決這個問題师幕？最近寫項目時，就發(fā)現(xiàn)了一個處理 CSS 前綴問題的神器——**AutoPrefixer**诬滩。
### What is AutoPrefixer
Autoprefixer 是一個后處理程序霹粥，它可以同 Sass，Stylus 或 LESS 等預(yù)處理器共通使用疼鸟。它適用于普通的 CSS后控，而你無需關(guān)心要為哪些瀏覽器加前綴，只需關(guān)注于使用 W3C 最新的規(guī)范空镜。
### How to use AutoPrefixer
介紹了這么多浩淘，如果用起來很麻煩，那還不如直接手寫吴攒，而 **AutoPrefixer** 的另一大特點(diǎn)就是使用簡便张抄，現(xiàn)在來說說怎么用。
**AutoPrefixer** 可以簡單的通過下載 plugin 配置到 `Sublime`洼怔，`Brackets` 或 `Atom` 等 IDE 里署惯，而在 `WebStorm` 中無法通過 plugin 直接安裝和使用 AutoPrefixer，需要通過 External Tools 或 File Watchers 來實現(xiàn)镣隶，在 `WebStorm` 中詳細(xì)的安裝方法可以參考[這篇文章](http://www.css88.com/archives/5670)极谊。
如果單單只能通過 IDE 才能使用這個功能，那它遠(yuǎn)稱不上神器安岂，真正讓其擁有神器之名的原因是：它可以很簡單轻猖、有效地同現(xiàn)有的打包工具（`gulp`, `webpack` 等）一同使用，來完成對項目中所有的 `css` 文件中的屬性添加前綴域那。
下面咙边，我們就分別來看在這兩種打包工具下如何使用 **AutoPrefixer**。
* gulp
在 `gulp` 中，可以使用 [AutoPrefixer官網(wǎng)](https://github.com/postcss/autoprefixer) 推薦的 `postcss` + `autoprefixer` 兩個插件的組合败许，也可以通過 `gulp-autoprefixer` 這一個插件友瘤。
```JavaScript
// Method 1: postcss + autoprefixer
gulp.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-autoprefixer
gulp.task('autoprefixer', function () {
var?autoprefixer?=?require('gulp-autoprefixer');
return gulp.src('./src/*.css')
.pipe([ autoprefixer({ browsers: ['last 2 versions'] }) ])
.pipe(gulp.dest('./dest'));
});
```
* Webpack
而在最近很火的 `webpack` 中使用 **AutoPrefixer** 更是輕而易舉、如虎添翼檐束。
使用 `webpack` 可以通過簡單的配置將本文開頭提到的 sass 這樣的預(yù)處理器同 `autoprefixer` 這樣的后處理程序結(jié)合在一起辫秧。
```javascript
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 官網(wǎng)已將其標(biāo)為【deprecated】被丧，推薦使用上面示例中通過 `postcss-loader` 的方式使用 `autoprefixer`盟戏。
