利用PostCSS跳進未來的CSS- JS-Republic’s Blog

　　在說明 PostCSS是什麼之前，我們先理解PostCSS不是什麼。

　　實質上，人們第一次聽說 PostCSS時，他們傾向於認為這是一款新出的CSS前處理器，類似SASS、LESS和Stylus。

　　如果你想把它當作前處理器來用，那麼它會如前處理器那樣工作。同時它也有後處理器、優化工具、相容未來語法的外掛......你想要的功能應有盡有。

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

　　所以你應該把 PostCSS當作一個構建工具。它能讓你用各類JavaScript外掛來維護你的CSS。 這些外掛可以在http://postcss.parts 這裡找到

　　由於有太多的外掛，我們將通過這篇文章檢閱一下那些常用和強大的外掛。

　　同時你也會了解到如何搭配使用Gulp建立一個單任務來處理CSS檔案。

　　Autoprefixer

　　如果你之前曾用過前處理器，你該體驗到不必再寫字首是件多麼愉悅的事。

　　舉個例子，不必再這樣寫

:-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
}

　　如果你想自己動手試試，可以用這個可互動demo http://autoprefixer.github.io

　　文件戳這裡：https://github.com/postcss/autoprefixer

　　PreCSS

　　即使PostCSS本不是SASS那樣的前處理器，但你依然能通過一些外掛來處理Sass類格式的檔案。

　　首選的外掛是PreCSS，它集合了大量的PostCSS外掛 ，讓你可以編寫Sass語法的樣式。

　　我邀請你閱讀 文件來了解更多細節，也可以玩玩這個可互動 demo 來測試各種可能性。

　　CssNext

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

　　遺憾的是，這個版本的規範依然在制定中，並且尚未公佈發行時間。

　　幸運的是，如果你想使用下一代CSS的一些功能，這裡有款叫CssNext的外掛能幫助你。

　　CSSNext的官網列出了所有支援的功能： http://cssnext.io/features/

　　你也可以在這裡玩玩：http://cssnext.io/playground/

　　CssNano

　　最後但同樣重要的，關於優化。CssNano能利用不同的modules壓縮和優化你的CSS程式碼。

　　我推薦你禁用the z-index，因為它很可能會擾搞亂你原本正常的z－index。

　　你可以檢閱這份可優化列表：http://cssnano.co/optimisations/ 你也可以在Gitter上和CssNano的創造者聊聊：https://gitter.im/ben-eb/cssnano

　　現在，我們看看如何利用Gulp使用這些外掛。

　　Gulp x PostCSS

　　Gulp

　　首先，以dev dependencies 的方式安裝Gulp、Gulp Load Plugins 和Gulp PostCSS 。在控制檯執行以下命令：

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

　　在你需要使用Gulp的地方建立一個 gulpfile.js 並加入如下程式碼。

var gulp = require('gulp'),

　　新增 Gulp Load PLugins的程式碼：

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

　　Gulp Load Plugins依賴會 通過$呼叫你需要的外掛。

　　PostCSS

　　接下來，同樣以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');

　　接下來開始寫 Gulp CSS任務

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

 });

　　在這個任務中，我們首先用一個變數來儲存準備用到的PostCSS外掛

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

　　設定CssNano的 zindex:false 禁止其重設我們的 z-index。

　　為了處理CSS檔案，我們需要檢索如下檔案：

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

　　然後通過processors變數內的PostCSS外掛來處理CSS檔案。

　　使用pipe方法串聯起處理過程

.pipe($.postcss(processors))

　　用如下程式碼輸出處理完成的檔案

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

　　以上全部，就是你使用PostCSS 外掛處理CSS時所要做的事。

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+上有份完整且詳細的指南，我強烈推薦你讀讀：http://webdesign.tutsplus.com/series/postcss-deep-dive–cms-889

　　我也利用這些PostCSS外掛創造了一份boilerplate樣板，可以幫你快速上手： https://github.com/PierrickGT/PCGB

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