I am NingBo

PostCSS-Comn使用说明

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

语法说明

以下内容为自定义进阶

PostCSS-Comn插件扩展

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

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

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

配置gulpfile.js文件

1
2
// 添加此行
var will_change = require('postcss-will-change');
1
2
3
4
5
6
gulp.task('css', function () { 
	var processors = [
		// 添加此行
		will_change
	]; 
});

完成 执行命令查看效果

1
gulp css

PostCSS配置与命令

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

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

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

1
$ cnpm install --global gulp-cli

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

1
$ cnpm install --save-dev gulp

配置package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{ 
	"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（项目根目录下）

1
cnpm install --save-dev gulp-postcss

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

1
2
var gulp = require('gulp');
var postcss = require('gulp-postcss');
1
2
3
4
5
6
7
gulp.task('css', function () { 
	var processors = [
	]; 
	return gulp.src('./src/*.css')
	.pipe(postcss(processors))
	.pipe(gulp.dest('./css')); 
});

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

1
2
3
.test{
	background: black;
}

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

1
$ gulp css

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

1
2
3
$ cnpm install autoprefixer --save-dev
$ cnpm install cssnext --save-dev
$ cnpm install precss --save-dev

配置gulpfile.js文件

1
2
3
var autoprefixer = require('autoprefixer'); 
var cssnext = require('cssnext'); 
var precss = require('precss');
1
2
3
4
5
var processors = [
	autoprefixer,
	cssnext,
	precss
];

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

1
$ gulp css

PostCSS入门教程

source:http://www.w3cplus.com

工具

插件

插件列表：Github | postcss.parts

常用插件：

打赏