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