vue package.json文件解析

众所周知为兼容所有浏览器，有的CSS属性需要对不同的浏览器加上前缀，然而有时添加一条属性，需要添加3~4条类似的属性只是为了满足浏览器的兼容，这不仅会增加许多的工作量，还会使得你的思路被打断。

如何解决这个问题？最近写项目时，就发现了一个处理CSS前缀问题的神器——AutoPrefixer。

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

// 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这样的预处理器同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'] })
]}