在上一篇文章中，我们介绍了如何在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 |
ole.com/83999/" target="_blank">上一篇文章中，我们介绍了如何在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; } |
现在在命令终端的项目目录下执行下面的命令：
|
|
