Gulp插件autoprefixer的使用

1.创建：gulpfile.js

//引入插件
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
 
 //默认执行任务
gulp.task('default', function () {
    //找到src目录下app.css，为其补全浏览器兼容的css
    return gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        //输出到dist文件夹
        .pipe(gulp.dest('dist'));
});

2.创建package.json

npm init

3.安装gulp到项目

npm install --save-dev gulp

4.安装插件到项目：

npm install --save-dev gulp-autoprefixer

 5.准备的src/app.css

.container{
    display: flex;
}

6.目录下运行：

gulp

 

然后查看dist/app.css 已经加上兼容后缀了

.container{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}