PostCSS-Comn

PostCSS-Comn使用说明，整合PostCSS常用功能
GitHub：https://github.com/NalvyBoo/PostCSS-Comn

插件作用

• 支持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文件夹 内查看编译后结果

语法介绍

• PreCSS语法介绍

以下内容为自定义进阶

PostCSS-Comn插件扩展

以扩展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

PostCSS配置与命令

淘宝镜像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

PostCSS入门教程

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不支持::)