PostCSS深入学习：Grunt配置
在上一篇文章中我们一起了解了如何在项目中使用Gulp来配置PostCSS。在这篇文章中，我们将一起探讨如何在项目中使用Grunt来配置PostCSS。
**注意：**如果你从示使用过命令行来配置Grunt，我建议你在阅读本教程之前先阅读我之前写的这个系列教程：《The Command Line for Web Design》
先决条件
在使用Grunt来配置PostCSS之前，我们假设你的本地电脑已经安装了这些应用程序：
- Node.js
- NPM
- Git
如查你不能确认是否安装了这些，请跟随这篇文章了解相关的知识。
请确保你已装安装了全局的Grunt CLI，并且了解如何使用Grunt完成自动化任务部署相关的操作。此外，按照教程，使用Grunt配置项目。继续后面的内容之前，确认你有一个项目文件夹，而且里面包含下面这些文件：
gruntfile.jspackage.json- 在项目目录下运行
grunt install，根据依赖关系，将相关插件安装到node_modules
PostCSS和Grunt
在项目的根目录下创建两个文件夹，一个命名为src，另一个命名为dest。并且将CSS的源文件放在src文件夹下，并且PostCSS的编译出来的CSS文件将会放置在dest文件夹下。
接下来要做的事情，就是在你的项目中安装PostCSS版本的Grunt插件grunt-postcss。
打开终端命令，并进入项目根目，输入下面的命令：
npm install grunt-postcss --save-dev
这个时候，项目文件结构类似下图所示的样子：
编辑器打开gruntfile.js文件，并且添加Gruntfile所需的基本代码：
module.exports = function(grunt) {
};
通过grunt.loadNpmTasks()函数加载grunt-postcss插件：
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
};
现在可以开始配置Grunt任务，好让PostCSS跑起来。首先像下面一样添加grunt.initConfig()函数：
module.exports = function(grunt) {
grunt.initConfig({
});
grunt.loadNpmTasks('grunt-postcss');
};
在函数里定义一个postcss对象：
module.exports = function(grunt) {
grunt.initConfig({
postcss: {
}
});
grunt.loadNpmTasks('grunt-postcss');
};
在postcss对象中嵌套两个对象，一个命名为options，另一个命名为dist:
module.exports = function(grunt) {
grunt.initConfig({
postcss: {
options: {
},
dist: {
}
}
});
grunt.loadNpmTasks('grunt-postcss');
};
在options对象中配置PostCSS所需的插件，而在dist对象中设置CSS的源文件和PostCSS编译后的CSS文件。
现在我们在src文件夹下创建一个CSS文件style.css，并且添加测试代码，如下所示：
.test {
background: black;
}
接下来更新dist对象，指定CSS的源文件地址为src/style.css，并且编译后的文件地址为dest/style.css：
dist: {
src: 'src/style.css',
dest: 'dest/style.css'
}
然后，在options对象中定义一个名为processors的空数组。这个数组用来设置PostCSS插件：
options: {
processors: [
]
},
运行和编译
你的postcss基本任务已配置好了。现在可以测试它，在你的命令终端下运行：
grunt postcss
运行后，命令终端会提示下面的这样的信息：
Running "postcss:dist" (postcss) task
>> 1 processed stylesheet created.
在你项目的dest文件夹下应该可以找到一个新的style.css文件，而且文件中包含的样式代码和src文件夹下的style.css一样。
添加PostCSS插件
现在我们添加需要的PostCSS插件：Autoprefixer(处理浏览器私有前缀)，cssnext(使用CSS未来的语法),precss(像Sass的函数)。
运行下面的命令，将插件安装到你的项目：
npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev
**注：**安装cssnext和precss时需要一段时间，因为他们包括了多个插件。
然后将这三个插件添加到processors数组中，更新后的数组如下：
processors: [
require('autoprefixer')(),
require('cssnext')(),
require('precss')()
]
继续在源style.css文件中添加一些测试代码用来检测新设置的PostCSS插件是否能预期工作。
删除前面的代码，添加下面的新代码：
/* Testing autoprefixer */
.autoprefixer {
display: flex;
}
/* Testing cssnext */
.cssnext {
background: color(red alpha(-10%));
}
/* Testing precss */
.precss {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}
在命令终端运行grunt postcss命令，编译后的结果会放在dest的style.css中，在编译后的文件中将会看到下面这样的新代码：
/* 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，编译符合需求的代码。
设置插件选项
请注意，如果你想要为一个插件配置选项，可以在require()函数后面添加第二个()，并在这里设置选项参数。比如，你可以给Autoprefixer指定浏览器版本，像下面这样设置：
processors: [
require('autoprefixer')({browsers: ['last 1 version']}),
require('cssnext')(),
require('precss')()
]
分享你的项目
PostCSS最美之处就是可以将插件根据自己的需要做任意的组合。这对于确保其他的人希望在一个项目中有相同的PostCSS插件设置时，就提出了一个很大的挑战。这得感谢npm，我们可以通过他来管理插件依赖关系。
因为我们安装插件到项目中使用了--save-dev标志，在安装时会自动将依赖文件写入项目的package.json文件中。这意味着如果你想和他人分享你的项目，他们可能在命令终端运行npm install命令，就可以自动安装分享的插件。
有关于更多关于npm依赖关系管理的信息，你可以点击这里进行更多的了解。
总结一下
根据上面介绍的内容，简单总结一下：
- 通过
npm创建项目，并且将grunt安装到gruntfile文件 - 安装
grunt-postcss插件 - 设置
gruntfile.js文件，通过grunt.loadNpmTasks('grunt-postcss)加载grunt-postcss - 创建一个任务,编译你的CSS
- 在任务中
options对象中嵌套一个processors数组 - 在
dist中指定CSS源文件和编译出的文件路径
你可以根据上面的教程介绍，遵循相同的步骤，你可以将PostCSS任何插件安装到项目中。
- 通过
npm install <plugin_name> --save-dev命令将插件安装到你的项目中 - 使用
require():require('<plugin_name>')在preprocessors数组中添加插件变量名
如果你感兴趣，可以点击这里将示例所有代码下载下来。
下一节：管理插件
现在你知道如何使用Gulp或Grunt在项目中配置你选择的任何想要的PostCSS任件。接下来你需要做的一件事情是在PostCSS插件的生态系统中找到适合你项目的插件。在接一下来的一篇文章中，我们将一起探讨这方面的相关知识。
本文根据@Kezz Bracey的《PostCSS Quickstart Guide: Grunt Setup》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-grunt-setup--cms-24545。
大漠
如需转载，烦请注明出处：https://www.fedev.cn/PostCSS/postcss-quickstart-guide-grunt-setup.htmlnike free run 5.0 soccer