在說(shuō)明 PostCSS是什么之前，我們先理解PostCSS不是什么。

　　實(shí)質(zhì)上，人們第一次聽(tīng)說(shuō) PostCSS時(shí)，他們傾向于認(rèn)為這是一款新出的CSS預(yù)處理器，類似SASS、LESS和Stylus。

　　如果你想把它當(dāng)作預(yù)處理器來(lái)用，那么它會(huì)如預(yù)處理器那樣工作。同時(shí)它也有后處理器、優(yōu)化工具、兼容未來(lái)語(yǔ)法的插件……你想要的功能應(yīng)有盡有。

　　PostCSS的主要目的是能讓你使用各種工具滿足你的需要。

　　所以你應(yīng)該把 PostCSS當(dāng)作一個(gè)構(gòu)建工具。它能讓你用各類JavaScript插件來(lái)維護(hù)你的CSS。 這些插件可以在postcss.parts 這里找到

　　由于有太多的插件，我們將通過(guò)這篇文章檢閱一下那些常用和強(qiáng)大的插件。

　　同時(shí)你也會(huì)了解到如何搭配使用Gulp創(chuàng)建一個(gè)單任務(wù)來(lái)處理CSS文件。

　　Autoprefixer

　　如果你之前曾用過(guò)預(yù)處理器，你該體驗(yàn)到不必再寫前綴是件多么愉悅的事。

　　舉個(gè)例子，不必再這樣寫

:-webkit-full-screen a {   display: -webkit-box;   display: flex  }  :-moz-full-screen a {   display: flex  }  :-ms-fullscreen a {   display: -ms-flexbox;   display: flex  }  :fullscreen a {   display: -webkit-box;   display: -ms-flexbox;   display: flex  }

　　只需

:fullscreen a {   display: flex  }

　　如果你想自己動(dòng)手試試，可以用這個(gè)可互動(dòng)demo http://autoprefixer.github.io

　　文檔戳這里：github.com/postcss/autoprefixer

　　PreCSS

　　即使PostCSS本不是SASS那樣的預(yù)處理器，但你依然能通過(guò)一些插件來(lái)處理Sass類格式的文件。

　　首選的插件是PreCSS，它集合了大量的PostCSS插件 ，讓你可以編寫Sass語(yǔ)法的樣式。

　　我邀請(qǐng)你閱讀 文檔來(lái)了解更多細(xì)節(jié)，也可以玩玩這個(gè)可互動(dòng) demo 來(lái)測(cè)試各種可能性。

　　CssNext

　　CSS4，下一代CSS，承諾將改變CSS的書寫方式和選擇器的使用方式。

　　遺憾的是，這個(gè)版本的規(guī)范依然在制定中，并且尚未公布發(fā)行時(shí)間。

　　幸運(yùn)的是，如果你想使用下一代CSS的一些功能，這里有款叫CssNext的插件能幫助你。

　　CSSNext的官網(wǎng)列出了所有支持的功能：cssnext.io/features/

　　你也可以在這里玩玩：cssnext.io/playground/

　　CssNano

　　最后但同樣重要的，關(guān)于優(yōu)化。CssNano能利用不同的modules壓縮和優(yōu)化你的CSS代碼。

　　我推薦你禁用the z-index，因?yàn)樗芸赡軙?huì)擾搞亂你原本正常的z－index。

　　你可以檢閱這份可優(yōu)化列表：cssnano.co/optimisations/ 你也可以在Gitter上和CssNano的創(chuàng)造者聊聊：gitter.im/ben-eb/cssnano

　　現(xiàn)在，我們看看如何利用Gulp使用這些插件。

　　Gulp x PostCSS

　　Gulp

　　首先，以dev dependencies 的方式安裝Gulp、Gulp Load Plugins 和Gulp PostCSS 。在控制臺(tái)執(zhí)行以下命令：

npm i -D gulp gulp-load-plugins gulp-postcss

　　在你需要使用Gulp的地方創(chuàng)建一個(gè) gulpfile.js 并加入如下代碼。

var gulp = require('gulp'),

　　添加 Gulp Load PLugins的代碼：

$ = require('gulp-load-plugins')();

　　Gulp Load Plugins依賴會(huì) 通過(guò)$調(diào)用你需要的插件。

　　PostCSS

　　接下來(lái)，同樣以dev dependency的方式需要安裝所需要的PostCSS插件

npm i -D autoprefixer cssnano cssnext precss

　　安裝好后加入到gulpfile.js

// PostCSS Plugins  var autoprefixer = require('autoprefixer'),  cssnext = require('cssnext'),  precss = require('precss'),  cssnano = require('cssnano');

　　接下來(lái)開(kāi)始寫 Gulp CSS任務(wù)

// Gulp task to process CSS with PostCSS plugins   gulp.task('css', function() {     });

　　在這個(gè)任務(wù)中，我們首先用一個(gè)變量來(lái)保存準(zhǔn)備用到的PostCSS插件

var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];

　　設(shè)置CssNano的 zindex:false 禁止其重設(shè)我們的 z-index。

　　為了處理CSS文件，我們需要檢索如下文件：

return gulp.src('./source/css/style.css')

　　然后通過(guò)processors變量?jī)?nèi)的PostCSS插件來(lái)處理CSS文件。

　　使用pipe方法串聯(lián)起處理過(guò)程

.pipe($.postcss(processors))

　　用如下代碼輸出處理完成的文件

.pipe(gulp.dest('./public/assets/stylesheets'));

　　以上全部，就是你使用PostCSS 插件處理CSS時(shí)所要做的事。

var gulp = require('gulp'),  $ = require('gulp-load-plugins')();    // PostCSS Plugins  var autoprefixer = require('autoprefixer'),  cssnext = require('cssnext'),  precss = require('precss'),  cssnano = require('cssnano');    // Gulp task to process CSS with PostCSS plugins  gulp.task('css', function() {  var processors = [autoprefixer, cssnext, precss, cssnano({zindex: false})];    return gulp.src('./source/css/style.css')  .pipe($.postcss(processors))  .pipe(gulp.dest('./public/assets/stylesheets'));  });

　　在 Tuts+上有份完整且詳細(xì)的指南，我強(qiáng)烈推薦你讀讀：webdesign.tutsplus.com/series/postcss-deep-pe–cms-889

　　我也利用這些PostCSS插件創(chuàng)造了一份boilerplate樣板，可以幫你快速上手： /github.com/PierrickGT/PCGB

　　blog.js-republic.com/jump-into-the-future-of-css-with-postcss/