The Postcss of Gulp development tools

Reference article: http://www.cnblogs.com/givebest/p/4771154.html

Package.json

1 {2"Name": "Postcss",3"Version": "1.0.0",4"description": "",5"Main": "Gulpfile.js",6"Scripts": {7"Test": "Echo \" Error:no test specified\ "&& exit 1"8   },9"Author": "",Ten"License": "ISC", One"Devdependencies": { A"Autoprefixer": "^6.3.6", -"Autoprefixer-core": "^6.0.1", -"Cssgrace": "^3.0.0", the"Cssnext": "^1.8.4", -"Gulp": "^3.9.1", -"Gulp-less": "^3.0.5", -"Gulp-postcss": "^6.1.1" +   } -}

Gulpfile.js

1 //JavaScript Document2 /**3 *postcss plug-in cssnext with next-generation CSS writing style compatible with browser now4 *postcss plugin autoprefixer for CSS full browser prefix5 *postcss plugin CSS Grace makes CSS compatible with the older version of IE6 */7 8 varGulp = require (' Gulp '));9 varPostcss = require (' gulp-postcss '));Ten varAutoprefixer = require (' autoprefixer ')); One varCssgrace = require (' Cssgrace ')); A varCssnext = require (' Cssnext ')); -Gulp.task (' CSS ',function () { -   varprocessors = [ theAutoprefixer ({browsers: [' last 3 version '], -Cascadefalse, -Removefalse -     }), + Cssnext (), - Cssgrace +   ]; A   returnGulp.src ('./src/css/*.css ')) at . Pipe (POSTCSS (processors)) -. Pipe (Gulp.dest ('./dist '))); - }); -Gulp.task (' Watch ',function(){ -Gulp.watch ('./src/css/*.css ', [' CSS ']); - }); inGulp.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) *) ;} .display-flex  { display :  flex ;} .bg  { Background-color :  Rgba (255,255,255,0.3) ;} .display-block  { display :  Inline-block ;} 

Postcss after the CSS file./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:1;}

The Postcss of Gulp development tools