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;
}