在上一篇文章中，我們介紹瞭如何在CodePen和Prepros中使用PostCSS。雖然裡面的選項設定可以讓你第一時間接觸和使用PostCSS，但也有很多PostCSS外掛限制你不能使用。
這篇教程將告訴你如何在Gulp配置中使用PostCSS外掛，而且可以根據你自己需要的去配置所要的外掛。這才是真正的進入到PostCSS外掛生態系統中。
特別宣告：如果你從未接觸或使用命令來配置Gulp的任務，我建議你在閱讀本教程之前先閱讀前面我寫的系列教程：《網頁設計的命令操作》。
需要的條件
鑑於我們將需要使用Gulp，在開始後面的內容之前，我假設你的電腦本地環境已經具備了下面列出來的條件：
如果你無法確認你的電腦本地系統是否安裝了這些，建議你跟著這篇教程操作一回，因為這些條件是我們進入教程後面必備條件。
當然你也可以先閱讀這篇教程，確保你對Gulp的基本操作有所瞭解。此外，按照教程中的“Gulp安裝專案”部分，確保你的專案資料夾中有以下面所列檔案：
- 一個
gulpfile.js檔案 - 一個
package.json檔案 - 根據專案所需安裝依賴模組，執行
gulp install會有一個node_modules資料夾
擴充套件教程
其實這些內容在網上一搜一大把，為了初學者更好的閱讀接下的內容，這裡提供一些參考文件。
PostCSS在Gulp中的基本配置
首先在你的專案中建立兩個資料夾，一個命名為src，另一個命名為dest。src資料夾用來放置未處理的CSS檔案，而dest用來放置PostCSS外掛處理後的檔案。
接下來需要做的就是在你的專案中安裝gulp-postcss外掛，安裝好之後就可以使用POstCSS處理器。
在安裝之前，配置一下package.json檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "testPostCSS", "version": "0.0.1", "description": "test PostCSS gulp plugin", "keywords": [ "gulpplugin", "PostCSS", "css" ], "author": "damo", "license": "MIT", "dependencies": { "postcss": "^5.0.0", "gulp": "~3.8.10" }, "devDependencies": { "gulp-postcss": "^6.0.1" } } |
開啟你的命令終端，並且進入到你的專案根目錄下，然後在命令終端輸入下面的命令：
|
1 |
npm install --save-dev gulp-postcss |
注：如果上面命令無法正常安裝，建議在上面的命令前加上sudo：
|
1 |
sudo install --save-dev gulp-postcss |
執行完上面命令之後，如果沒出任何差錯，在你的終端命令中可以看到類似下圖的提示：
安裝完成後你的專案結構看起來就應該像這樣：
現在通過編輯器開啟gulpfile.js檔案，並且建立gulp和gulp-postcss變數，如下面程式碼所示：
|
1 2 |
var gulp = require('gulp'); var postcss = require('gulp-postcss'); |
我們現在可以設定一個任務，讓PostCSS讀取CSS原檔案並且處理它。
新增的程式碼如下：
|
1 2 3 4 5 6 7 |
gulp.task('css', function () { var processors = [ ]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); }); |
我們一起來看一下上在的程式碼。在第一行，設定了一個任務名叫css。這個任務將會執行一個函式，同時在這個函式中建立了一個名為processors的陣列。現在這個陣列為空，這裡將插入我們想使用的PostCSS外掛。
在processors陣列後面，我們指定了需要處理的目標檔案，即src目錄中的任何CSS檔案。
這裡面使用了兩個.pipe()函式，設定postcss()執行PostCSS，並且給postcss()傳遞processors引數，後面會告訴PostCSS要使用哪個外掛。
接下來的第二個.pipe()函式，指定結過PostCSS處理後的CSS放置在dest資料夾中。
測試編譯
在src目錄中建立一個測試檔案style.css，並在這個檔案中新增一些CSS的測試程式碼：
|
1 2 3 |
.test { background: black; } |
現在在命令終端的專案目錄下執行下面的命令：
|
1 2 |
gulp css |
這是剛才設定的任務，執行完上面的任務之後，在dest目錄中可以找到一個新的style.css檔案。
當你開啟這個新檔案後，你可以看到和你的原始檔一樣的程式碼。使用的程式碼並沒有任何的改變，那是因為我們還沒有使用任何的PostCSS外掛。從先前的教程中，你就會知道它的外掛實際上是會對CSS執行操作的。
新增PostCSS外掛
現在我們新增需要的PostCSS外掛：Autoprefixer(處理瀏覽器私有字首)，cssnext(使用CSS未來的語法),precss(像Sass的函式)。
執行下面的命令，將外掛安裝到你的專案：
|
1 2 3 4 |
npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev |
其實也可以在命令中執行下面的程式碼，也可以達到相同的效果：
|
1 |
npm install autoprefixer cssnext precss --save-dev |
注：安裝cssnext和precss時需要一段時間，因為他們包括了多個外掛。
接下來，在我們的專案中定義變數，將這些外掛載入到我們的專案中。和前面的方式一樣，在gulpfile.js檔案中新增下面的程式碼：
|
1 2 3 |
var autoprefixer = require('autoprefixer'); var cssnext = require('cssnext'); var precss = require('precss'); |
然後將這三個外掛新增到processors陣列中，更新後的陣列如下：
|
1 2 3 4 5 |
var processors = [ autoprefixer, cssnext, precss ]; |
三個外掛已結新增到了processors陣列中了，這個時候PostCSS會知道將這些外掛功能應用到我們的CSS原始檔中。
我們現在可以給src/style.css檔案中新增一些測試檔案和檢測他們的工作。刪除測試檔案中以前的程式碼，並新增新的CSS樣式程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Testing autoprefixer */ .autoprefixer { display: flex; } /* Testing cssnext */ .cssnext { background: color(red alpha(-10%)); } /* Testing precss */ .precss { <a href='http://www.jobbole.com/members/jinyi7016'>@if</a> 3 < 5 { background: green; } @else { background: blue; } } |
在命令終端執行gulp css命令。在dest目錄生成的檔案會有下面的程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* Testing autoprefixer */ .autoprefixer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Testing cssnext */ .cssnext { background: rgba(255, 0, 0, 0.9); } /* Testing precss */ .precss { background: green } |
如上面編譯出來的程式碼你應該看到了Autoprefixer給需要的屬性新增了瀏覽器的私有字首，第二個任務cssnext將顏色轉換成rgba()，第三部分PreCSS檢查了@if @else，編譯符合需求的程式碼。
設定外掛的選項
注：如果你想為一個外掛配置選項引數，你可以在外掛後面新增一對括號，並在裡面傳遞選項的引數。例如，Autoprefixer需要指定對應的瀏覽器列表引數，你可以像這樣設定：
|
1 2 3 4 5 |
var processors = [ autoprefixer({browsers: ['last 1 version']}), cssnext, precss ]; |
分享你的專案
PostCSS最美之處就是可以將外掛根據自己的需要做任意的組合。這對於確保其他的人希望在一個專案中有相同的PostCSS外掛設定時，就提出了一個很大的挑戰。這得感謝npm，我們可以通過他來管理外掛依賴關係。
因為我們安裝外掛到專案中使用了--save-dev標誌，在安裝時會自動將依賴檔案寫入專案的package.json檔案中。這意味著如果你想和他人分享你的專案，他們可能在命令終端執行npm install命令，就可以自動安裝分享的外掛。
有關於更多關於npm依賴關係管理的資訊，你可以點選這裡進行更多的瞭解。
來總結一下
接下來做個簡單的總結：
- 通過
npm建立專案，並且將gulp安裝到gulpfile檔案 - 安裝
gulp-postcss外掛 - 設定你的
gulpfile.js檔案，將gulp和gulp-postcss載入到專案中 - 建立一個任務，來編譯你的CSS
- 在任務中，設定一個
processors陣列 - 在
.pipe()是設定一個postcss()函式，並且將processors傳遞給它
你可以根據上面的教程介紹，遵循相同的步驟，你可以將PostCSS任何外掛安裝到專案中。
- 通過
npm install <plugin_name>–save-dev 命令將外掛安裝到你的專案中 - 類似
var autoprefixer = require("autoprefixer")程式碼在你的gulpfile.js檔案中定義要載入的外掛變數名 - 將變數名新增到你的
preprocessors陣列中
如果你感興趣，可以點選這裡將示例所有程式碼下載下來。
下一節：Grunt + PostCSS
在接下來的一節內容中，我們將一起討論在專案中如何使用Grunt來配置PostCSS。