postcss

postcss 后编译技术, less/sass 等都是预编译, 预编译是把一些 css 逻辑转化为 css, postcss 能把 css 放在一个真实的 cssom 环境中执行, 然后检测, 可以在其中添加一些后处理的模块

Install

npm install gulp-postcss --save-dev  //后处理
npm install autoprefixer --save-dev  //补前缀
npm install cssnano --save-dev       //css 压缩

Basic Usage 基本用法 gulp-postcss

var gulp = require('gulp');
// postcss 模块
var postcss = require('gulp-postcss');
// 自动补充浏览器前缀
var autoprefixer = require('autoprefixer');
// css压缩模块
var cssnano = require('cssnano');
//添加 css 任务事件
gulp.task('css', function () {
    var processors = [
        autoprefixer(), //添加浏览器前缀任务
        cssnano(),      //添加css压缩任务
    ];
    //加载 css 文件
    return gulp.src('./src/*.css')
    	//执行 postcss
        .pipe(postcss(processors))
        //文件输出
        .pipe(gulp.dest('./dest'));
});

postcss & less

less 结合 postcss

var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

//添加 css 任务事件
gulp.task('css', function () {
    var processors = [
        autoprefixer(), //添加浏览器前缀任务
        cssnano(),      //添加css压缩任务
    ];
    //加载 css 文件
    return gulp.src('./less/*.less')
        .pipe(less())  // 先执行 less 任务,  less 文件编译为 css 文件后在执行 postcss
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

postcss & sass

sass 结合 postcss

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

//添加 css 任务事件
gulp.task('css', function () {
    var processors = [
        autoprefixer(), //添加浏览器前缀任务
        cssnano(),      //添加css压缩任务
    ];
    //加载 css 文件
    return gulp.src('./sass/*.scss')
        .pipe(sass())  // 先执行 sass 任务,  scss 文件编译为 css 文件后在执行 postcss
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});