postcss gulp 安装使用

备注：

   测试使用的是gulp 进行的编译

1. 项目初始化

npm init

mkdir src

touch app.css

body{
    display: flex;
}

2. 安装(gulp 、gulp-postcss 以及几个依赖)

npm install -g gulp-cli 
npm install  gulp-postcss --save-dev
npm install gulp --save-dev
npm install  autoprefixer --save-dev
npm install cssnano --save-dev

3. gulpfile.js 定义

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
 
gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

4. post.config.js 定义(可选，如果上面的gulpfile 没有使用autoprefixer 就需要)

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
备注：
不需要使用postcss.config.js 的gulpfile.js

var postcss = require('gulp-postcss');
var gulp = require('gulp');
 
gulp.task('css', function () {
    return gulp.src('./src/*.css')
        .pipe(postcss())
        .pipe(gulp.dest('./dest'));
});

5. 使用

gulp css

6. 输出信息

./dist/app.css

body{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

7. 参考资料

https://www.npmjs.com/package/gulp-postcss
https://github.com/postcss/postcss