postcss介绍

前言

在 Web 应用开发中，CSS 代码的编写是重要的一部分。CSS 规范从最初的 CSS1 到现在的 CSS3，再到 CSS 规范的下一步版本，规范本身一直在不断的发展演化之中。这给开发人员带来了效率上的提高。不过与其他 Web 领域的规范相似的处境是，CSS 规范在浏览器兼容性方面一直存在各种各样的问题。不同浏览器在 CSS 规范的实现方面的进度也存在很大差异。另外，CSS 规范本身的发展速度与社区的期待还有一定的差距。这也是为什么 SASS 和 LESS 等 CSS 预处理语言可以流行的重要原因。SASS 和 LESS 等提供了很多更实用的功能，也体现了开发人员对 CSS 语言的需求。本文中要介绍的 PostCSS 是目前流行的一个对 CSS 进行处理的工具。PostCSS 依托其强大的插件体系为 CSS 处理增加了无穷的可能性。

PostCSS 介绍

PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

PostCSS 从其诞生之时就带来了社区对其类别划分的争议。这主要是由于其名称中的 post，很容易让人联想到 PostCSS 是用来做 CSS 后处理（post-processor）的，从而与已有的 CSS 预处理（pre-processor）语言，如 SASS 和 LESS 等进行类比。

PostCSS 的主要功能

主要功能只有两个：

• 第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，
• 第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。PostCSS 是一个全新的工具，给前端开发人员带来了不一样的处理 CSS 的方式。

使用 PostCSS

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。下面将具体介绍如何在 Webpack、Grunt 和 Gulp 中使用 PostCSS 的 Autoprefixer 插件。

在 Webpack 中使用 PostCSS 插件

var path = require('path');

module.exports = {
	context: path.join(__dirname, 'app'),
	entry: './app',
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{
			test: /\.css$/,
			loader: "style-loader!css-loader!postcss-loader"
			}
		]
	},
	postcss: function () {
		return [require('autoprefixer')];
	}
}

postcss常用插件

Autoprefixer

Autoprefixer 是一个流行的 PostCSS 插件，其作用是为 CSS 中的属性添加浏览器特定的前缀。由于 CSS 规范的制定和完善一般需要花费比较长的时间，浏览器厂商在实现某个 CSS 新功能时，会使用特定的浏览器前缀来作为正式规范版本之前的实验性实现。
比如 Webkit 核心的浏览器使用-webkit-，微软的 IE 使用-ms-。为了兼容不同浏览器的不同版本，在编写 CSS 样式规则声明时通常需要添加额外的带前缀的属性。这是一项繁琐而无趣的工作。Autoprefixer 可以自动的完成这项工作。Autoprefixer 可以根据需要指定支持的浏览器类型和版本，自动添加所需的带前缀的属性声明。开发人员在编写 CSS 时只需要使用 CSS 规范中的标准属性名即可。

标准的 CSS 弹性盒模型的 display 属性声明

#content {
display: flex;
}

在经过 Autoprefixer 处理之后得到的 CSS 如下 所示。

#content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

Autoprefixer 使用 Can I Use 网站提供的数据来确定所要添加的不同浏览器的前缀。随着浏览器版本的升级，浏览器在新版本中可能已经提供了对标准属性的支持，从而不再需要添加额外的前缀。Autoprefixer 可以配置需要支持的浏览器。如”last 2 versions”表示主流浏览器的最近两个版本，”ie 6-8”表示 IE 6 到 8，”> 1%”表示全球使用率大于 1%的浏览器版本。

require('autoprefixer')({
browsers: ['last 2 versions']
})

Autoprefixer 除了添加所需要的属性名称前缀之外，还可以移除 CSS 代码中冗余的属性名称前缀。遗留 CSS 代码中可能包含由开发人员手动添加的旧版本的浏览器所支持的带前缀的属性名称。Autoprefixer 默认情况下会移除这些冗余的前缀。可以通过配置对象中的 remove 属性来配置该行为。

cssnano

什么是缩减（minification）？

缩减（minification）是指利用各种方法来 减少代码体积的过程。和 gzip 之类的保留 CSS 文件的原始语义（即无损失）的技术不同，缩减（minification） 天生是一个有损失的过程，例如，其中某些值可能会被替换为更简化的 等价语法，或者选择器被合并。

缩减（minification）步骤的最终结果是生成的代码将与 原始代码行为相同，但是某些部分被修改以 尽可能减少代码体积。

将 gzip 压缩和缩减（minification）相结合，可以最大限度的减少 文件体积，但是不要耳听为虚、眼见为实，为什么不去试试 css-size ？ css-size 是一个专门对比缩减（minification）前后文件体积大小变化的模块。

cssnano概念

cssnano 就是这样的一个缩减器，它使基于 Node.js 开发的。cssnano 是一个 PostCSS 插件，可以添加到你的构建流程中，用于确保最终生成的 用于生产环境的 CSS 样式表文件尽可能的小。

使用好处

大量的代码优化
我们提供了众多不同的优化，从简单的 清除空白符到复杂的不同名称的同一 keyframes 的合并等。 更多信息请参考 预设指南。
统一的 CSS 处理
cssnano 基于 PostCSS 来处理 CSS 代码。因为很多 现代化的 CSS 工具都是基于 PostCSS 开发的，因此你可以把这些工具组合起来 并生成一棵单一的抽象语法树（AST）。这就意味着总的处理时间 减少了，因为 CSS 不再需要进行多次解析了。
现代化的架构以及模块化
因为 cssnano 是基于 PostCSS 的，因此我们可以将 cssnano 的功能拆解为多个 插件，每个插件只需负责执行一项小的优化即可。并且许多优化可以限定 到某一组特定的 CSS 属性上，这就比利用正则表达式对 CSS 做全局处理更加安全。

详见https://www.cssnano.cn/guides/