九、CSS工程化方案

一、PostCSS介绍

二、PostCSS插件的使用

项目安装 - npm install postcss-cli 
全局安装 - npm install postcss-cli -g

postcss-cli地址：GitHub - postcss/postcss-cli: CLI for postcss

postcss地址：GitHub - postcss/postcss: Transforming styles with JS plugins

编译CSS:

postcss src/01-postcss.css -o build\01-postcss.css

注意：

postcss - 本身不具备处理CSS能力，只是可以解析CSS，我们可以在解析的过程中，可以对CSS解析结构进行修改。

我们现在对原CSS加CSS前缀处理：

原始CSS:

/* @import "./02-plugins-module.css"; */

.box{
    box-shadow: 0 0 3px rgba(255,255,255, .3);
}

这里需要使用到autoprefixer插件

autoprefixer插件 - 为CSS添加前缀，确保被浏览器兼容

安装autoprefixer插件

npm install autoprefixer

解析结果：

注意：

        autoprefixer需要指定浏览器的类型，如果不指定，会自动加一些默认的浏览器类型，我们也可以手工去指定。

比如，指定所有浏览器最近的2个版本：

浏览器市场份额大于10%的浏览器：

注意：'>0%' - 就是支持所有的浏览器。

可以指定具体浏览器版本： Firefox版本 > 30

关于浏览器的指定方式，见下图：

postcss-import插件 - 合并CSS文件

解析结果：

css-nano插件 - 压缩代码

安装cssnano插件：

npm install cssnano

 postcss配置：

压缩CSS前：

压缩CSS后:

cssnext插件  - 把新 CSS 规范（浏览器尚未实现）转换成兼容性更强的 CSS

安装cssnext:

npm install cssnext

cssnext配置

编译结果：

precss插件 - 基于PostCSS的预处理器

编译前：

PostCSS配置：

编译后：

gulp-postcss插件 - 构建工具

原理：通过流的方式，将各个插件串起来，以达到构建的目的。

安装gulp:

npm install gulp

定义gulp构建任务(gulpfile.js)：

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

//定义了一个叫'postcss'的任务
gulp.task('postcss', function () {
    //获取了一个gulp-postcss,并指定了src源文件，将它通过管道的方式传给gulp,其中定义了需要执行的插件，最终将结果输出到build目录下
    var postcss    = require('gulp-postcss');

    return gulp.src('src/02-plugins-main.css')
        .pipe(postcss([
            atImport,
            autoprefixer({
                browsers:['last 2 versions']
            }),
            // cssnano
        ]))
        .pipe(gulp.dest('build/'));
});

执行gulp:

//postcss - task任务名
gulp postcss

webpack插件 - 打包工具

解释：

        webpack认为，JS是是整个应用的核心入口，只需引入js,其他一切都交给js来处理。

课程示例：

安装webpack:

npm install webpack

src\05-webpack-modules.js

src\05-webpack-main.js

执行打包：

在html中引入打包好的js:

打开页面查看打包效果：

前边说过，对于webpack,js是一切的入口，CSS等资源都可以被JS管理打包，看下面示例:

执行打包：

 注意：

        webpack直接引用CSS,执行打包会报错，这是因为，上面我们引用CSS,是通过require引用的，webpack认为引用的文件是个JSON格式文件，而实际上引入的文件是CSS语法，因此就报错了，这时，需要利用webpack的loader机制，通过css-loader插件，处理css文件，再交给webpack。

安装css-loader、style-loader插件命令：

//css-loader - 作用：css-loader负责把css变成js,交给webpack处理
//stye-loader - 作用：将变成js的css注入到html
npm install css-loader style-loader

webpack配置css-loader、style-loader插件：

重新执行打包：

查看页面效果：

css-modules和extract-text-plugin

为了增强理解，看下面示例：

执行打包：

打开页面查看效果：

页面效果出来了，但是存在两个问题：

1.组件的样式有可能被别人的样式干扰到，同样 组件的样式也可能干扰到别人的当前页面元素，这是因为样式的名称太普通，很容易跟别人的样式发生冲突，怎么解决呢，那就是加个不跟别人冲突的样式前缀，其实这个解决办法，css-modules已经实现了；

2.通过页面可以看到，html的样式是被JS注入到了header内，这样会造成性能影响。

解决问题1,现在修改下代码：

将编译后返回的动态样式名称，动态写到对应的class上：

重新编译：

之前我们讲了，css是通过js加载的，所以性能会有影响，为什么不通过浏览器机制直接加载呢！

解决问题2，修改代码：

修改webpack.config.js,通过extract-text-webpack-plugin插件处理。

重新编译打包：

注意看，这次多输出了一个CSS文件，我们可以对比下上次编译打包的结果：

把新生成的CSS文件引入HTML文件中：

查看页面：

webpack小结

三、真题