慕课网CSS工作应用+面试(8)CSS工程化PostCSS

1.PostCSS介绍

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

慕课网CSS工作应用+面试(8)CSS工程化PostCSS_第1张图片
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']
		}),
	
	]
	
};

慕课网CSS工作应用+面试(8)CSS工程化PostCSS_第2张图片

慕课网CSS工作应用+面试(8)CSS工程化PostCSS_第3张图片

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)

你可能感兴趣的:(CSS)