摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用，如果要多帶帶使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結合自動化工作在項目中使用。

PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多PostCSS插件中最流行的一個。

截至目前（2017年7月）PostCSS已經有超過200個插件，你可以插件列表查找有沒有你所需要的插件。如果你想自己寫個插件，據說這是一個不錯的主意，而且非常簡單（前提掌握node.js，不過我還沒學會呢），你可以試著搞點事。

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

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

再來看看這張PostCSS下載數量的npm-stat統計表（數據證明一切）：

學習PostCSS之前需要了解一些事情：

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

PostCSS is Not “Future Syntax”（不是新式/未來語法？不知道怎么翻譯）

PostCSS本身并非整理或優化CSS的工具

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

那么它還有一些特性，例如創建了一個插件功能極強的生態系統，具有模塊化需要什么用什么（precss就是一個集成了類似SASS很多方法的包），相比其他的CSS預處理器它的優勢主要體現在以下幾個方面：

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

你既可以寫正常的CSS，也可以結合LESS或者SASS一起編寫

對Source Map支持更好

他的插件真的太多太強大太便利了

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

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

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

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

CLI是否建議全局安裝?（這樣包括其對應的插件都要全局了？如果不全局就失去了CLI的意義了？）。全局安裝完成后，試著輸入PostCSS，出現以下結果，說明安裝OK

不過我個人習慣僅安裝在項目中，于是我沒有選擇安裝CLI，而是直接在項目中安裝PostCSS，npm i --save-dev postcss，我這里有個例子可以看看

接下來，我們還做不了什么，我們需要安裝一些插件配合PostCSS，例如，我現在安裝一個autoprefixer

npm install --save-dev autoprefixer，并參考例子中的style01.css，我要通過PostCSS對它進行處理。這里兩個方法：

通過cd node_modules/.bin/進入node_modules/.bin/目錄內再執行

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

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

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

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

npm run postcss:style01

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

另外我們可以同樣的采用Parser插件來編譯樣式文件（當然我實際上是不會用sugarss的，如果你習慣用sass請安裝postcss-scss），我的DEMO里面請參考style02.sss文件的編譯。這里就不多說了。

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

官方對于插件根據用途做了分類，主要有以下幾個類別：

解決全局CSS問題

使用未來的CSS語法

編寫可讀性更好的CSS

用于圖片和字體

CSS語法檢查

其他

以上內容主要是用來熟悉一下PostCSS的。接下來說點實際的，如何利用PostCSS結合自動化工作在項目中使用。

關于webpack基礎配置的相關內容這里就不多說了~前面已有大神寫了有興趣可以膜拜一下。

我們先來創建一個項目目錄，結構如下：（style0*.css作為我測試的文件，后面可能增加）

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

接下來安裝依賴包：

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

然后修改已下文件，請仔細閱讀?

package.json

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

先來個簡單的試試：

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")
  ]
}

讀完了應該發現此刻運行肯定會出錯的~因為還沒有安裝其他跟PostCSS相關的插件呢，于是繼續安裝：

npm i -D sugarss precss autoprefixer

（插件簡單介紹，sugarss是比較特別的css語法，我尚未了解到這樣寫的好處，僅供大家學習參考。precss功能就很強悍了，類似sass的一些功能。autoprefixer就不用多說啦！）

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)

基本工作大功告成，開兩個終端跑兩條命令試試看。

npm run start

npm run build

一切運行OK，接下來訪問http://localhost:9000/src/，看起來也都還不錯。當然寫到這里只是介紹了如何結合webpack使用PostCSS。而實際項目應用中，我目前還在探索更多實用的插件，構建一個基本可以替代SASS，LESS等

參考文獻：

webpack官方說明：postcss-loader

Gulp我用的很少，不是很熟悉，這里結合官方一些和自己嘗試的DEMO進行說明。

我基于之前的代碼來繼續補充內容。

安裝Gulp相關的包：

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

增加Gulp配置文件gulpfile.js，頁面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下測試 */
$blue: #056ef0;
.test {
  display: flex;
  color: $blue;
  .box {
    flex: 1;
  }
}

package.json的scripts部分如下

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

一切就緒后，我們來執行偉大的命令了：

npm run gulp

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

和之前相同，我這里依舊采用了webpack-dev-server啟動的服務器（當然這個又依賴webpack配置，除非你將配置直接寫入package.json內），那么你當然也可以使用其他自己喜歡的服務器（例如http-server），我們依舊先啟動服務器npm run start，然后訪問本地http://localhost:9000/src/index2.html就可以看到效果了。或者你也可以直接去看dist目錄內生成出來的style05.css文件，一切都是那么美好~

因為這次學習，純粹是根據“教科書”來學，來講解的，因此也就沒有什么真正的精髓，我也是才開始接觸PostCSS，文中有錯誤之處還請指正。我希望以后在項目中盡可能的用好PostCSS，再次帶來一篇簡短而有力的文章分享給大家。因時間和精力有限希望這篇文章能給大家帶來些幫助。目前能想到的，還有一些未來需要補充的內容包括：

sourcemaps

是否有移動端基于PostCSS的自適應解決方案

自己寫個可能會比較實用的插件

結合postcss-sass究竟有什么好處

postcss對圖片和字體等資源文件處理

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

其他參考文獻匯總：
PostCSS Deep Dive（強烈推薦！我看完了才發現有部分譯文：PostCSS深入學習）
PostCSS深入學習: PostCSS和Sass、Stylus或LESS一起使用
PostCSS 是個什么鬼東西？
PostCSS一種更優雅、更簡單的書寫CSS方式
PostCSS及其常用插件介紹
PostCSS – A Comprehensive Introduction
http://www.cnblogs.com/terrylin/p/5229169.html
相當不錯的PPT形式
https://ai.github.io/about-postcss/en/
postcss的優勢
From Sass to PostCSS
PostCSS – Sass Killer or Preprocessing Pretender?

關于我個人的PostCSS一系列學習, 介紹及總結, 有興趣可以參閱:

PostCSS自學筆記（一）【安裝使用篇】

PostCSS自學筆記（二）【插件篇】

PostCSS自學筆記（二）【番外篇一】

PostCSS自學筆記（二）【番外篇二】