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