前言
PostCSS已经在一段时间内迅速普及，如果你还不知道PostCSS或还没有使用它，我建议你看一下之前的一篇介绍文章《PostCSS简介》，其中介绍了使用PostCSS的基本方法，包括如何安装运行一些插件。
本文，将介绍如何在gulp构建工具中使用PostCSS。因为这不是一篇gulp的教程，所以在这里不介绍如何使用gulp。对于gulp可以参看这篇文章《gulp.js简介》
创建项目
在开始之前，首先创建一个项目文件夹。该文件夹里创建dist和dest文件夹。dist里放所有源文件，dest里放处理过的文件。
接下来用命令行cmd切换到你的项目文件夹，并运行下面命令：
npm install gulp-postcss --save-dev
--save-dev ：安装gulp-postcss插件并且把gulp-postcss插件放到package.json文件的依赖项中。这样可以方便在其它项目中进行部署，其他项目部署，只需要把package.json拷贝过去，并在当前项目中，运行npm install命令，依赖插件会自动安装，方便快捷省时省力。
到这一步你的项目文件夹的结构如下：
dist-源文件夹
style.css 未编译的css样式
dest 目标文件夹
node_modules npm 所有的npm模块文件夹
gulp 安装gulp创建
gulp-postcss 安装gulp-postcss时创建
gulpfile.js gulp的入口文件
package.json 包管理文件
安装插件
让我们先从基本插件的安装入手。我们将要使用short-color插件。这个插件主要完成对color属性的扩展，使其可以把第二个颜色值用于background-color属性。
运行下面的命令安装 short-color
npm install postcss-short-color --save-dev
也可以同时安装gulp-postcss和postcss-short-color，命令如下
npm install gulp-postcss postcss-short-color --save-dev
插件安装完成后，我们要打开gulpfile.js文件，调用插件。首先引用各插件，代码如下
var gulp = require('gulp'); var postcss = require('gulp-postcss'); var shortColor = require('postcss-short-color');
接下来，创建一个gulp任务来处理dist文件夹下的css文件，并在dest文件夹生成一个编译好的样式文件。代码如下：
gulp.task('css', function () { return gulp.src('dist/*.css') .pipe(postcss([shortColor])) .pipe(gulp.dest('dest'));});
我们创建了一个名叫css的任务，这个任务名称我们将在需要时调用它。可以通过把要处理的文件放到gulp.src()命令中。"*.css"表示dist下所有的css文件。
接下来用，pipe()函数来调用插件。我们把所有插件作为参数传递给postcss()函数。这个例子中我们只传递了一个插件，下一节我们将传递多个插件。在这之后，我们用gulp.dest()函数来批定创建文件的目标文件夹。
如果一切都没问题，我们测试一下，在dist中创建style.css文件。样式如下
section { color: white black;}
下面在项目目录下运行命令行命令gulp css。这时你会发现在你的dest文件夹下生成了一个style.css文件，打开后代码如下：
section { color: white; background-color: black;}
如果你的代码和上面一样，那么这个插件就已经可以使用了。
安装多个插件
只安装一个基本插件对工作帮助不大。PostCSS有一堆有用的插件，大多数时候你不会单独只使用一个。本节，我们来看看怎么使多个插件同时工作。
这里有3个非常有用的PostCSS插件，分别为:short,cssnext和autoprefixer。
short可以让你简写很多CSS样式属性。
例如
.heading { font-size: 1.25em 2;}
会转化为
.heading { font-size: 1.25em; line-height: 2;}
cssnext可以让你使用最新的css语法。例如
.link {
color: color(green alpha(-10%));}会转化为
.link {
background: rgba(0, 255, 0, 0.9);}最后autoprefixer可以添加css的浏览器前缀
例如：
img { filter: grayscale(0.9);}
会转化为
img { -webkit-filter: grayscale(0.9); filter: grayscale(0.9);}
现在让我们来看看怎么安装并使用它们来转化我们的样式表。
在项目文件夹运行下面的命令
npm install autoprefixer postcss-short postcss-cssnext --save-dev
修改gulpfile.js文件，引用各插件，并在管道里以数组的形式放入所有的插件。gulpfile.js文件代码如下：
var gulp = require('gulp'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnext = require('postcss-cssnext'); var shortcss = require('postcss-short'); gulp.task('css', function() { var plugins = [ shortcss, cssnext, autoprefixer({browsers: ['> 1%'], cascade: false}) ]; return gulp.src('initial/*.css') .pipe(postcss(plugins)) .pipe(gulp.dest('final'));});
在这里我们配置了autoprefixer插件，这个配置使插件生成的css文件，支持所有全球份额>1%的浏览器。另外禁用了阶式缩进，让所有的属性左对齐。类似的配置在其它插件里也有效。
以上都就绪了，下面就写一段CSS进行测试。在style.css样式文件中添加以下css样式：
.prefix-filter { display: flex;} .cssshort-section { text: #333 bold justify uppercase 1.25em 1.7 .05em;} .cssnext-link { color: color(blue alpha(-10%));} .cssnext-link:hover { color: color(orange blackness(80%));}
在项目文件夹下运行命令行命令gulp css，打开在dest文件夹生成的style.css文件。可以看到以下代码
.prefix-filter { display: -webkit-box; display: flex;} .cssshort-section { color: #333; font-weight: 700; text-align: justify; text-transform: uppercase; font-size: 1.25em; line-height: 1.7; letter-spacing: .05em;} .cssnext-link { color: #0000ff; color: rgba(0, 0, 255, 0.9);} .cssnext-link:hover { color: rgb(51, 33, 0);}
插件的执行顺序
最后一节讲一下PostCSS的清晰的实用性。所有PostCSS的功能都来源于它的插件。有一点要注意，在复杂的项目中，使用多个插件时，插件的执行顺序很重要。
看一下rgba-fallback和color-function这两个插件。rgba-fallback会把rgba格式转化成16进制格式，color-function会把css里的color()函数转化成兼容的CSS值。比如你有下面这段css
body { background: color(orange a(90%));}
如果你把rgba-fallback插件放在color-function插件前，如下
var plugins = [ rgbafallback, colorfunction ];
你将会得到下面的样式
body { background: rgba(255, 165, 0, 0.9);}
这里并没有对rgba进行16进制的转化。这是因为在rgba-fallback插件在处理backgrround时发现color(orange a(90%))不知道怎么处理。然后才执行color-function把颜色函数转化为rgba颜色值。
改变一下插件顺序，按下面的顺序执行
var plugins = [ colorfunction, rgbafallback ];
最终的CSS如下
body { background: #ffa500; background: rgba(255, 165, 0, 0.9)}
首先color-function先把background的color转化为rgba值，然后用rgba-fallback函数进行16进制回退。
总结
本文已经介绍了gulp和PostCSS配合的基本方法。利用高效的gulp和插件的组合，可以大大节约你开发的时间和不必要的兼容问题。
原文:How to Use PostCSS with Gulp