gulp开发工具之postcss

参考文章：http://www.cnblogs.com/givebest/p/4771154.html

package.json

 {
   "name": "postcss",
   "version": "1.0.0",
   "description": "",
   "main": "gulpfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "autoprefixer": "^6.3.6",
     "autoprefixer-core": "^6.0.1",
     "cssgrace": "^3.0.0",
     "cssnext": "^1.8.4",
     "gulp": "^3.9.1",
     "gulp-less": "^3.0.5",
     "gulp-postcss": "^6.1.1"
   }
 }

gulpfile.js

 // JavaScript Document
 /**
 *PostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器
 *PostCSS插件 Autoprefixer 为CSS补全浏览器前缀
 *PostCSS插件 CSS Grace 让CSS兼容旧版IE
 */

 var gulp = require('gulp');
 var postcss = require('gulp-postcss');
 var autoprefixer = require('autoprefixer');
 var cssgrace  = require('cssgrace');
 var cssnext  = require('cssnext');
 gulp.task('css', function () {
   var processors = [
     autoprefixer({browsers: ['last 3 version'],
       cascade: false,
       remove: false
     }),
     cssnext(),
     cssgrace
   ];
   return gulp.src('./src/css/*.css')
     .pipe(postcss(processors))
     .pipe(gulp.dest('./dist'));
 });
 gulp.task('watch', function(){
   gulp.watch('./src/css/*.css', ['css']);
 });
 gulp.task('default', ['watch', 'css']);

./src/css/index.css

@charset "UTF-8";
:root {
    --mainColor: #333;
    --fontSize: 1.1rem;
}
body {
    color: var(--mainColor);
    font-size: calc(var(--fontSize)*2);
}
.display-flex {
    display: flex;
}
.bg {
    background-color: rgba(255,255,255,0.3);
}
.display-block {
    display: inline-block;
}

postcss之后的css文件./dist/css/index.css

@charset "UTF-8";
body {
    color: #333;
    font-size: 35px;
    font-size: 2.2rem;
}
.display-flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}
.bg {
    background-color: rgba(255,255,255,0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4cffffff', endColorstr='#4cffffff');
}
:root .bg{
    filter: none\9;
}
.display-block {
    display: inline-block;
    *display: inline;
    *zoom:;
}