autoprefixer的使用：自动管理浏览器前缀的插件!!!在gulp以及webpack的使用方法，以及结合PostCss与sourcemaps的使用

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixe添加到资源构建工具（例如Grunt,gulp,webpack）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 

一般与PostCss结合使用（相当于解析器通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer）

功能展示

eg：

div{                                     
  display : flex;   
}

========>

div{
  display : -webkit-box;
  display : -webkit-flex;
  display : -moz-box;
  display : -ms-flexbox;
  display : flex;
}

用法介绍 https://www.npmjs.com/package/autoprefixer

1.在gulp使用（当然得下载其中所需要的依赖哈）

（1）使用一：

const gulp = require('gulp');

const autoprefixer = require('gulp-autoprefixer');

gulp.task('default', () =>

    gulp.src('src/app.css')

   .pipe(postcss([ autoprefixer({

            browsers: ['last 2 versions'],

            cascade: false

      }) ]))

        .pipe(gulp.dest('dist'))

);

（2）结合 gulp-sourcemaps使用（

Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码（压缩后的代码）。总的来说是能告诉开发者那里出错了，有检测js的也有检测css的，下面写的是css，如果不理解，去看看阮一峰的讲解吧，哈哈哈

）

const gulp = require('gulp');

var postcss      = require('gulp-postcss');

const sourcemaps = require('gulp-sourcemaps');

const autoprefixer = require('gulp-autoprefixer');

const concat = require('gulp-concat');

gulp.task('default', () =>

    gulp.src('src/**/*.css')

        .pipe(sourcemaps.init())

        .pipe(postcss([ autoprefixer() ]))

        .pipe(concat('all.css'))

        .pipe(sourcemaps.write('.'))

        .pipe(gulp.dest('dist'))

);

2.在webpack中使用 https://www.npmjs.com/package/gulp-autoprefixer

 

//sass-loader依赖于node-sass，所以还要安装node-sass
//postcss-loader autoprefixer postcss 处理浏览器兼容
npm install --save-dev  postcss-loader autoprefixer postcss

module.exports = {

    module: {

        rules: [

            {

                test: /\.css$/,

                use: ["style-loader", "css-loader", "postcss-loader"]

            }

        ]

    }

}

 

添加postcss.config.js 文件

module.exports = {

  plugins: [

    require('autoprefixer')

  ]

}