慕课网CSS工作应用+面试（8）CSS工程化PostCSS

1.PostCSS介绍

CSS工程化：
组织、优化、构建、维护

PostCSS：
PostCSS本身只有解析能力
各种神奇的特性全靠插件

PostCSS插件：
1.import 模块合并
2.autoprefixer 自动加前缀
3.cssnano 压缩代码
4.cssnext 使用CSS新特性
5.precess 变量、mixin、循环等

PostCSS优势主要体现在以下几个方面：
1.拥有极高的处理性能（3倍以上的处理速度）
2.你既可以写正常的CSS，也可以结合LESS或者SASS一起编写
3.对Source Map支持更好
4.他的插件真的太多太强大太便利了

官方对于插件根据用途做了分类，主要有以下几个类别：
1.解决全局CSS问题
2.使用未来的CSS语法
3.编写可读性更好的CSS
4.用于图片和字体
5.CSS语法检查

其他

PostCSS学习资料参考：
https://www.w3cplus.com/blog/tags/516.html
https://www.cnblogs.com/dll-ft/p/5811639.html
https://segmentfault.com/a/1190000010926812#articleHeader3
https://github.com/whidy/postcss-study
https://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html
https://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html
https://blog.csdn.net/zl_best/article/details/80252591
https://www.cnblogs.com/goodbeypeterpan/p/5706594.html
https://www.postcss.com.cn/
https://segmentfault.com/a/1190000014782560

2.PostCSS插件的使用

1.直接使用postcss-cli：

安装postcss-cli和编译

cnpm install postcss-cli
./node_modules/.bin/postcss ./src/css/style.css -o ./src/build/01-postcss.css

使用postcss.config.js

//首先安装插件autoprefixer
npm install autoprefixer

//插件postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {	
	plugins:[
		autoprefixer({
			browsers:['last 2 versions']
		}),	
	]	
};

编译

./node_modules/.bin/postcss ./src/css/style.css -o ./src/build/01-postcss.css

再添加postcss-import插件

npm install postcss-import

@import "style1.css";
.box{
	box-shadow:0 0 3px rgba(255,255,255,.3);
}

//style1.css
*{
	padding:0px;
	margin:0px;
}

//postcss.config.js
const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');

module.exports = {
	
	plugins:[
		atImport,
		autoprefixer({
			browsers:['last 2 versions']
		}),
	]

};

//编译
./node_modules/.bin/postcss ./src/css/style.css -o ./src/build/01-postcss.css

//最后编译结果
*{
	padding:0px;
	margin:0px;
}
.box{
	-webkit-box-shadow:0 0 3px rgba(255,255,255,.3);
	        box-shadow:0 0 3px rgba(255,255,255,.3);
}

postcss.config.js再添加cssnano插件（代码压缩）

const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
const cssnano = require('cssnano');

module.exports = {
	
	plugins:[
		atImport,
		cssnano,
		autoprefixer({
			browsers:['last 2 versions']
		}),
	
	]
	
};

最后压缩后代码：

*{padding:0;margin:0}.box{-webkit-box-shadow:0 0 3px hsla(0,0%,100%,.3);box-shadow:0 0 3px hsla(0,0%,100%,.3)}

postcss.config.js再添加cssnext(使用未来的CSS，可能现在浏览器支持性还不是很好的特性)和precss(像预处理器)插件：

const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
const cssnano = require('cssnano');
const cssnext = require('postcss-cssnext');
const precss = require('precss');

module.exports = {
	
	plugins:[
		atImport,
		cssnano,
		cssnext,
		precss,
		autoprefixer({
			browsers:['last 2 versions']
		}),
	
	]
	
};

2.gulp中使用PostCSS

PostCSS支持的构建工具：
CLI命令行工具
webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcss
…

也可以查看这篇文章使用介绍:https://aotu.io/notes/2015/10/13/start-postcss/index.html

首先生成package.json文件

# --yes 参数能够帮助我们快速生成默认的package.json
npm init --yes

将上面创建的package.json文件的main参数改为gulpfile.js，然后安装我们所需的依赖

# gulp跟gulp-postcss是必须的，后面两个插件为了演示用途
npm i gulp gulp-postcss autoprefixer autoprefixer-core postcss-cssnext --save-dev -d

package.json文件内容如下：

//package.json
{
  "name": "postcss",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.5.0",
    "autoprefixer-core": "^6.0.1",
    "gulp": "^4.0.0",
    "gulp-postcss": "^8.0.0",
    "postcss-cssnext": "^3.1.0"
  }
}

创建gulpfile.js

# 这里用命令行进行创建，你也可以手动新建
touch gulpfile.js

将下面代码贴进gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
//定义css任务
gulp.task('css', function(){
  //定义postcss任务流数组
  var processors = [
    autoprefixer({
      browsers:['last 3 version'],
      cascade: false,
      remove: false
    }),
    cssnext()
  ];
  return gulp.src('./src/css/*.css')
             .pipe(postcss(processors))
             .pipe(gulp.dest('./dist'));
});

创建示例样式style.css,然后根文件目录下运行gulp css编译

h1{
  display:flex;
}
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}
body {
color: var(--mainColor);
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}

3.Webpack中使用PostCSS

Webpack：
JS是整个应用的核心入口
一切资源均由JS管理依赖
一切资源均由webpack打包

Webpack中使用PostCSS可以参考：https://blog.csdn.net/u010982507/article/details/81412335
https://www.cnblogs.com/cangqinglang/p/8964460.html

我们执行时候webpack时候，显示报错，Cannot find module ‘webpack’。

我们可以尝试下面的命令：

./node_modules/.bin/webpack src/index.js dist/index.bundle.js

我们还要注意Webapck的配置，webpack4.x版本和之前配置差别挺大的。

3.css-modules和extract-text-plugin

ExtractTextPlugin将CSS从JS中提取出来
css modules解决CSS命名冲突的问题

extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

参考文章：
https://www.jianshu.com/p/ed3c98ba5474

css modules：
解决类名冲突的问题
使用PostCSS或者webpack等构建工具中基础使用，进行编译
在HTML模板中使用编译过程产生的类名。

参考文章：
https://www.jianshu.com/p/15caa7af321c
https://segmentfault.com/a/1190000010301977

4.webpack小结

css-loader将CSS变成JS
style-loader将JS样式插入head
ExtractTextPlugin将CSS从JS中提取出来
css modules解决CSS命名冲突的问题
less-loader sass-loader各类预处理器
postcss-loader PostCSS处理

5.CSS面试真题

1.如何解决CSS模块化问题

Less Sass等预处理器
PostCSS插件（postcss-import/precss等）
webpack处理CSS（css-loader+style-loader）

2.PostCSS可以做什么？

取决于插件可以做什么
autoprefixer cssnext precss等 兼容性处理
import模块合并
css语法检查 兼容性检查
压缩文件

3.CSS modules是做什么的，如何使用

解决类名冲突的问题
使用PostCSS或者webpack等构建工具中基础使用，进行编译
在HTML模板中使用编译过程产生的类名。

4.为什么使用JS来引用、加载CSS

JS作为入口，管理资源有天然优势
将组件的结构、样式、行为封装到一起，增强内聚
可以做更多处理（webpack）