PostCSS-Comn使用说明，整合PostCSS常用功能

• 支持CSS未来语法
• 自动补全浏览器私有前缀
• CSS预处理（整合Sass、LESS或Stylus功能，语法基本和Sass的相同）
• 通过@import，整合多个CSS文件
• 将相同的CSS媒体查询规则合并为一个
• 压缩CSS文件
• 给rgba颜色创建降级方案(添加备用颜色)
• 给opacity提供降级方案（给IE浏览器添加滤镜属性）
• 让IE8支持rem单位
• 将伪元素的::转换为:(IE8不支持::)

1. 全局安装Gulp
2. 复制仓库文件到项目目录（PostCSS文件夹 内的内容）
3. 命令终端运行：npm install（淘宝镜像使用该命令：cnpm install）
4. src文件夹 为编辑源文件，css文件夹 为生成代码文件
5. src文件夹 目录下命令终端运行：gulp css
6. css文件夹 内查看编译后结果

• cssnext语法介绍
• PreCSS语法介绍

以扩展postcss-will-change插件为例

安装插件 项目目录下执行命令行

$ npm install postcss-will-change --save-dev

配置gulpfile.js文件

// 添加此行
var will_change = require('postcss-will-change');

gulp.task('css', function () { 
	var processors = [
		// 添加此行
		will_change
	]; 
});

完成 执行命令查看效果

gulp css

淘宝镜像npmcnpm（写命令时，将npm换成cnpm，其他与npm语法相同）

$ npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装gulp 如果之前有安装过一个全局版本的 gulp，请执行一下npm rm --global gulp来避免和gulp-cli冲突

$ cnpm install --global gulp-cli

项目安装gulp（项目根目录下）

$ cnpm install --save-dev gulp

配置package.json文件

{ 
	"name": "PostCSS-Comn", 
	"version": "0.0.1", 
	"description": "PostCSS gulp plugin", 
	"keywords": [ 
		"gulpplugin", 
		"PostCSS", 
		"css" 
	], 
	"author": "ningbo", 
	"license": "MIT", 
	"dependencies": { 
		"postcss": "^5.0.0", 
		"gulp": "~3.8.10" 
	}, 
	"devDependencies": { 
		"gulp-postcss": "^6.0.1" 
	} 
}

安装gulp-postcss（项目根目录下）

cnpm install --save-dev gulp-postcss

配置gulpfile.js文件，src文件为css编辑文件，css文件为编译生成文件

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () { 
	var processors = [
	]; 
	return gulp.src('./src/*.css')
	.pipe(postcss(processors))
	.pipe(gulp.dest('./css')); 
});

测试（在src中创建测试文件style.css）

.test{
	background: black;
}

测试运行命令，在css文件查看style.css

$ gulp css

添加PostCSS插件：Autoprefixer(处理浏览器私有前缀)，cssnext(使用CSS未来的语法),precss(像Sass的函数)

$ cnpm install autoprefixer --save-dev
$ cnpm install cssnext --save-dev
$ cnpm install precss --save-dev

配置gulpfile.js文件

var autoprefixer = require('autoprefixer'); 
var cssnext = require('cssnext'); 
var precss = require('precss');

var processors = [
	autoprefixer,
	cssnext,
	precss
]; 

运行命令，在css文件查看style.css

$ gulp css

source:http://www.w3cplus.com

• PostCSS深入学习：你需要知道什么
• PostCSS深入学习：设置选项
• PostCSS深入学习：Gulp设置
• PostCSS深入学习：Grunt配置
• PostCSS深入学习: 管理插件
• PostCSS深入学习: 跨浏览器兼容性
• PostCSS深入学习: 压缩和优化CSS
• PostCSS深入学习: PreCSS的使用
• PostCSS深入学习: 定制自己的预处理器
• PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
• PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS
• PostCSS深入学习: 简写和速写
• PostCSS入门：Sass用户入门指南

• CodePen
• Prepros

插件列表：Github | postcss.parts

常用插件：

• cssnext：CSS未来语法
• Autoprefixer：自动补全浏览器私有前缀
• precss：CSS预处理（整合Sass、LESS或Stylus功能，语法基本和Sass的相同）
• postcss-import：通过@import，整合多个CSS文件
• css-mqpacker：将相同的CSS媒体查询规则合并为一个
• cssnano：压缩CSS文件
• postcss-color-rgba-fallback：给rgba颜色创建降级方案(添加备用颜色)
• postcss-opacity：给opacity提供降级方案（给IE浏览器添加滤镜属性）
• node-pixrem：让IE8支持rem单位
• postcss-pseudoelements：将伪元素的::转换为:(IE8不支持::)