摘要：而則可制定個(gè)人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經(jīng)等不及安裝使用了吧。安裝及使用一般是結(jié)合自動(dòng)化工具使用，如果要多帶帶使用可以安裝，這里我先對(duì)的安裝使用講解下。接下來(lái)說(shuō)點(diǎn)實(shí)際的，如何利用結(jié)合自動(dòng)化工作在項(xiàng)目中使用。

PostCSS是一個(gè)利用JS插件來(lái)對(duì)CSS進(jìn)行轉(zhuǎn)換的工具，這些插件非常強(qiáng)大，強(qiáng)大到無(wú)所不能。其中，Autoprefixer就是眾多PostCSS插件中最流行的一個(gè)。

截至目前（2017年7月）PostCSS已經(jīng)有超過(guò)200個(gè)插件，你可以插件列表查找有沒(méi)有你所需要的插件。如果你想自己寫(xiě)個(gè)插件，據(jù)說(shuō)這是一個(gè)不錯(cuò)的主意，而且非常簡(jiǎn)單（前提掌握node.js，不過(guò)我還沒(méi)學(xué)會(huì)呢），你可以試著搞點(diǎn)事。

看到這里，你可能沒(méi)有發(fā)現(xiàn)它的強(qiáng)大之處，甚至我自己都沒(méi)有被我翻譯的這段官方文字所打動(dòng)。因?yàn)闆](méi)(wǒ)有(yě)對(duì)(bù)比(tài)就(huì)沒(méi)(yòng)有(zhè)傷(wán)害(yì)。好了，是時(shí)候啟動(dòng)裝逼模式了。

維基百科，阿里巴巴，谷歌，Wordpress，Twitter等網(wǎng)站均有使用，大佬們都在用你有什么理由不跟上步伐。

再來(lái)看看這張PostCSS下載數(shù)量的npm-stat統(tǒng)計(jì)表（數(shù)據(jù)證明一切）：

學(xué)習(xí)PostCSS之前需要了解一些事情：

PostCSS插件的處理方式類(lèi)似那些CSS預(yù)處理器，而非預(yù)處理器和后處理器（PostCSS is Not a Pre-processor and Not a Post-processor either）

PostCSS is Not “Future Syntax”（不是新式/未來(lái)語(yǔ)法？不知道怎么翻譯）

PostCSS本身并非整理或優(yōu)化CSS的工具

PostCSS可以完成很多意想不到的事情，例如用postcss-rtl惡搞一下?

那么它還有一些特性，例如創(chuàng)建了一個(gè)插件功能極強(qiáng)的生態(tài)系統(tǒng)，具有模塊化需要什么用什么（precss就是一個(gè)集成了類(lèi)似SASS很多方法的包），相比其他的CSS預(yù)處理器它的優(yōu)勢(shì)主要體現(xiàn)在以下幾個(gè)方面：

擁有極高的處理性能（3倍以上的處理速度）

你既可以寫(xiě)正常的CSS，也可以結(jié)合LESS或者SASS一起編寫(xiě)

對(duì)Source Map支持更好

他的插件真的太多太強(qiáng)大太便利了

其他對(duì)比SASS和LESS的區(qū)別在于他們內(nèi)置了大量的方法，而也許你只需要用到幾個(gè)變量而已，大材小用。而PostCSS則可制定個(gè)人需求的一套解決方案（僅安裝需要的插件）。這也就是他高性能的主要原因。幾乎SASS和LESS有的功能全都有！

總之好處太多了。這里就不一一列舉了。迫不及待的你已經(jīng)等不及安裝使用了吧。

PostCSS一般是結(jié)合自動(dòng)化工具使用，如果要多帶帶使用可以安裝PostCSS CLI，這里我先對(duì)PostCSS CLI的安裝使用講解下。Windows下安裝（文中操作全部基于WINDOWS環(huán)境）：

npm i -g postcss-cli或者npm i --save-dev postcss-cli

CLI是否建議全局安裝?（這樣包括其對(duì)應(yīng)的插件都要全局了？如果不全局就失去了CLI的意義了？）。全局安裝完成后，試著輸入PostCSS，出現(xiàn)以下結(jié)果，說(shuō)明安裝OK

不過(guò)我個(gè)人習(xí)慣僅安裝在項(xiàng)目中，于是我沒(méi)有選擇安裝CLI，而是直接在項(xiàng)目中安裝PostCSS，npm i --save-dev postcss，我這里有個(gè)例子可以看看

接下來(lái)，我們還做不了什么，我們需要安裝一些插件配合PostCSS，例如，我現(xiàn)在安裝一個(gè)autoprefixer

npm install --save-dev autoprefixer，并參考例子中的style01.css，我要通過(guò)PostCSS對(duì)它進(jìn)行處理。這里兩個(gè)方法：

通過(guò)cd node_modules/.bin/進(jìn)入node_modules/.bin/目錄內(nèi)再執(zhí)行

postcss ../../src/style01.css -o ../../dist/output_style01.css -u autoprefixer

通過(guò)修改package.json中的scripts，增加一條postcss命令

"postcss:style01": "postcss ./src/style01.css -o ./dist/output_style01.css -u autoprefixer"

然后再回到根目錄（postcss-study目錄）下執(zhí)行

npm run postcss:style01

兩者效果相同，當(dāng)然我傾向于后者啦。完成后一條鮮亮的綠色的讓人安全感十分強(qiáng)列的提示語(yǔ)出現(xiàn)了√ Finished ...前面還有個(gè)sweet的勾勾，請(qǐng)看編譯后的output_style01.css聰明的你一定能舉一反三的。做出更多驚奇的事情的~

另外我們可以同樣的采用Parser插件來(lái)編譯樣式文件（當(dāng)然我實(shí)際上是不會(huì)用sugarss的，如果你習(xí)慣用sass請(qǐng)安裝postcss-scss），我的DEMO里面請(qǐng)參考style02.sss文件的編譯。這里就不多說(shuō)了。

還有一種預(yù)先寫(xiě)好配置文件，這個(gè)就稍微先進(jìn)一些，也不會(huì)看起來(lái)很亂。我們創(chuàng)建一個(gè)postcss.config.js文件：
module.exports = {
  parser: "sugarss",
  plugins: [
    require("autoprefixer")
  ]
}
不過(guò)這種經(jīng)過(guò)我個(gè)人測(cè)試，僅適用于全局安裝了PostCSS-CLI和sugarss的情況下再該配置文件目錄下執(zhí)行postcss ./src/style02.sss -o ./dist/test.css命令就好了。這里個(gè)人不是很推薦。關(guān)于CLI下的一些方法暫時(shí)就不多說(shuō)了，如有錯(cuò)誤請(qǐng)各位大佬指正~?

官方對(duì)于插件根據(jù)用途做了分類(lèi)，主要有以下幾個(gè)類(lèi)別：

解決全局CSS問(wèn)題

使用未來(lái)的CSS語(yǔ)法

編寫(xiě)可讀性更好的CSS

用于圖片和字體

CSS語(yǔ)法檢查

其他

以上內(nèi)容主要是用來(lái)熟悉一下PostCSS的。接下來(lái)說(shuō)點(diǎn)實(shí)際的，如何利用PostCSS結(jié)合自動(dòng)化工作在項(xiàng)目中使用。

關(guān)于webpack基礎(chǔ)配置的相關(guān)內(nèi)容這里就不多說(shuō)了~前面已有大神寫(xiě)了有興趣可以膜拜一下。

我們先來(lái)創(chuàng)建一個(gè)項(xiàng)目目錄，結(jié)構(gòu)如下：（style0*.css作為我測(cè)試的文件，后面可能增加）

|– dist
|– src
| |– images
| | |– postcss-00.png
| | |– postcss-01.png
| – index.js
| – index.html
| – style04.sss
|– postcss.config.js
|– webpack.config.js
|– package.json

接下來(lái)安裝依賴(lài)包：

npm i -D postcss-loader style-loader css-loader webpack webpack-dev-server

然后修改已下文件，請(qǐng)仔細(xì)閱讀?

package.json

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
},

先來(lái)個(gè)簡(jiǎn)單的試試：

webpack.config.js

var path = require("path");
module.exports = {
  entry: {
    index: path.resolve(__dirname, "src/index.js")
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /.sss$/,
      exclude: /node_modules/,
      use: [{
          loader: "style-loader",
        },
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
          }
        },
        {
          loader: "postcss-loader"
        }
      ]
    }]
  },
  devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    hot: true,
    host: "0.0.0.0",
    disableHostCheck: true
  }
}

postcss.config.js

module.exports = {
  parser: "sugarss",
  plugins: [
    require("precss"),
    require("autoprefixer")
  ]
}

讀完了應(yīng)該發(fā)現(xiàn)此刻運(yùn)行肯定會(huì)出錯(cuò)的~因?yàn)檫€沒(méi)有安裝其他跟PostCSS相關(guān)的插件呢，于是繼續(xù)安裝：

npm i -D sugarss precss autoprefixer

（插件簡(jiǎn)單介紹，sugarss是比較特別的css語(yǔ)法，我尚未了解到這樣寫(xiě)的好處，僅供大家學(xué)習(xí)參考。precss功能就很強(qiáng)悍了，類(lèi)似sass的一些功能。autoprefixer就不用多說(shuō)啦?。?/p>

index.html

  
  
  
  


  

    
this is a container
  
  

style04.sss

$blue: #056ef0

.test 
  box-sizing: border-box
  padding: 50px
  border: 10px solid $blue
  width: 200px
  height: 200px

.multiline,
.selector
  box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
              1px 0 3px rgba(0, 0, 0, .6)

基本工作大功告成，開(kāi)兩個(gè)終端跑兩條命令試試看。

npm run start

npm run build

一切運(yùn)行OK，接下來(lái)訪問(wèn)http://localhost:9000/src/，看起來(lái)也都還不錯(cuò)。當(dāng)然寫(xiě)到這里只是介紹了如何結(jié)合webpack使用PostCSS。而實(shí)際項(xiàng)目應(yīng)用中，我目前還在探索更多實(shí)用的插件，構(gòu)建一個(gè)基本可以替代SASS，LESS等

參考文獻(xiàn)：

webpack官方說(shuō)明：postcss-loader

Gulp我用的很少，不是很熟悉，這里結(jié)合官方一些和自己嘗試的DEMO進(jìn)行說(shuō)明。

我基于之前的代碼來(lái)繼續(xù)補(bǔ)充內(nèi)容。

安裝Gulp相關(guān)的包：

npm run i -D gulp gulp-postcss gulp-sourcemaps

增加Gulp配置文件gulpfile.js，頁(yè)面index2.html，樣式style05.css，修改package.json的script如下：

gulpfile.js

var postcss = require("gulp-postcss");
var gulp = require("gulp");

gulp.task("css", function () {
  var postcss = require("gulp-postcss");
  var sourcemaps = require("gulp-sourcemaps");

  return gulp.src("src/style05.css")
    .pipe(sourcemaps.init())
    .pipe(postcss([require("precss"), require("autoprefixer")]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/"));
});

index2.html

  
  
  
  
  


  

    
this is a box
    
this is another box
  

style05.css

/* gulp下測(cè)試 */
$blue: #056ef0;
.test {
  display: flex;
  color: $blue;
  .box {
    flex: 1;
  }
}

package.json的scripts部分如下

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack",
  "gulp": "gulp css"
},

一切就緒后，我們來(lái)執(zhí)行偉大的命令了：

npm run gulp

我的電腦等待了約1.26s~1.29s，提示finish啦~

和之前相同，我這里依舊采用了webpack-dev-server啟動(dòng)的服務(wù)器（當(dāng)然這個(gè)又依賴(lài)webpack配置，除非你將配置直接寫(xiě)入package.json內(nèi)），那么你當(dāng)然也可以使用其他自己喜歡的服務(wù)器（例如http-server），我們依舊先啟動(dòng)服務(wù)器npm run start，然后訪問(wèn)本地http://localhost:9000/src/index2.html就可以看到效果了?；蛘吣阋部梢灾苯尤タ磀ist目錄內(nèi)生成出來(lái)的style05.css文件，一切都是那么美好~

因?yàn)檫@次學(xué)習(xí)，純粹是根據(jù)“教科書(shū)”來(lái)學(xué)，來(lái)講解的，因此也就沒(méi)有什么真正的精髓，我也是才開(kāi)始接觸PostCSS，文中有錯(cuò)誤之處還請(qǐng)指正。我希望以后在項(xiàng)目中盡可能的用好PostCSS，再次帶來(lái)一篇簡(jiǎn)短而有力的文章分享給大家。因時(shí)間和精力有限希望這篇文章能給大家?guī)?lái)些幫助。目前能想到的，還有一些未來(lái)需要補(bǔ)充的內(nèi)容包括：

sourcemaps

是否有移動(dòng)端基于PostCSS的自適應(yīng)解決方案

自己寫(xiě)個(gè)可能會(huì)比較實(shí)用的插件

結(jié)合postcss-sass究竟有什么好處

postcss對(duì)圖片和字體等資源文件處理

暫時(shí)想到這些，如果你還有一些想到的歡迎在下面留言哦?

其他參考文獻(xiàn)匯總：
PostCSS Deep Dive（強(qiáng)烈推薦！我看完了才發(fā)現(xiàn)有部分譯文：PostCSS深入學(xué)習(xí)）
PostCSS深入學(xué)習(xí): PostCSS和Sass、Stylus或LESS一起使用
PostCSS 是個(gè)什么鬼東西？
PostCSS一種更優(yōu)雅、更簡(jiǎn)單的書(shū)寫(xiě)CSS方式
PostCSS及其常用插件介紹
PostCSS – A Comprehensive Introduction
http://www.cnblogs.com/terrylin/p/5229169.html
相當(dāng)不錯(cuò)的PPT形式
https://ai.github.io/about-postcss/en/
postcss的優(yōu)勢(shì)
From Sass to PostCSS
PostCSS – Sass Killer or Preprocessing Pretender?

關(guān)于我個(gè)人的PostCSS一系列學(xué)習(xí), 介紹及總結(jié), 有興趣可以參閱:

PostCSS自學(xué)筆記（一）【安裝使用篇】

PostCSS自學(xué)筆記（二）【插件篇】

PostCSS自學(xué)筆記（二）【番外篇一】

PostCSS自學(xué)筆記（二）【番外篇二】