postcss gulp 安装使用

时间:2022-01-05 02:19:17
备注:
   测试使用的是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