CSS 后处理器

image.png

后处理器概解读

image.png image.png image.png

Autoprefixer SublimeText 和 Gulp 安装

插件github网址：https://github.com/sindresorhus/sublime-autoprefixer

安装步骤

• 打开 sublime text3 编辑器 ctrl + shift + p
• 输入 install package 选中下图所示的选项

image.png

• 之后再输入 Autoprefixer，直接选中自动安装即可
• 安装之后设置快捷键 找到 sublime 顶部菜单依次选择 首选项 -> 快捷键设置 之后就如下图所示

image.png

• 在右侧的 User 下面新增设置的代码，之后保存即可

{ "keys": ["ctrl+shift+a"], "command": "autoprefixer" }

结果如下图

image.png

测试

• 在桌面新建一个 test.css 文件并拖拽至 sublime 中进行编辑
  • 首先给 div 写一个 display:flex; 的样式之后按上面设置的快捷键组合 ctrl + shift + a 就可以自动填充前缀名了

image.png

扩展

• 可以自行设定 填充几种或者是什么样的类型

image.png

• 默认的就是上图中的 ms 和 webkit ，下面演示在 设置中怎么添加的
• 在 sublime 编辑器的顶部菜单中依次选择 首选项 -> Package Setting -> Autoprefixer 打开的是如下图所示的配置面板 左侧是默认的 右侧是用户自定义的，之后编辑右侧的文件，加入下面的代码

"browsers": ["last 4 version"]

最后结果如下图所示

image.png

结合 Gulp 配置

• 一般情况下都是不会手动的去增加的，一般都是通过工具来自动的填充的

工具 npmjs 网址：https://www.npmjs.com/package/autoprefixer
在网址的下面 https://www.npmjs.com/package/autoprefixer#usage 写的有使用 Gulp、Webpack 或者是 Grunt 的使用示例

image.png

image.png image.png

• 使用 Gulp 时用到的扩展插件 grunt-postcss

image.png
image.png

Autoprefixer 实际应用

• 在桌面新建一个 autoprefixer 文件夹，并将其拖拽至 sublime 中
• 打开命令行工具输入命令

/进入项目文件夹
cd Desktop\autoprefixer\
//项目初始化
npm init
//之后一直回车即可

• 因为使用到了 gulp 所以要先在项目的根目录下 新建一个 gulpfile.js 文件，编辑 gulpfile.js 文件

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
//npmjs 地址 https://www.npmjs.com/package/css-mqpacker
var mqpacker = require('css-mqpacker');
//npmjs 地址 https://www.npmjs.com/package/csswring
var csswring = require('csswring');
var less = require('gulp-less');
gulp.task('default', function() {
    var processors = [
        autoprefixer({
            browsers:['last 2 version']
        }),
        mqpacker,
        csswring
    ];
    return gulp.src('./src/*.less')
        .pipe(less())
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

• 之后在命令行中装 gulpfile.js 配置文件中需要的所有的包

npm install gulp --save-dev
npm install --save-dev gulp-postcss
npm install autoprefixer --save-dev
npm install css-mqpacker --save-dev
npm install csswring --save-dev
npm install gulp-less --save-dev

• 装完包之后再命令杭州执行编译命令，显示如下图就证明执行成功了

gulp

![image.png](https://img.haomeiwen.com/i6264932/12bf3016ab9b842e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

*   此时在 sublime 中查看项目文件，会发现自动增加了一个 dest 目录且目录里面有一个 text.css 源码如下，可以看到这个填充、压缩、打包、合并都做好了

![image.png](https://img.haomeiwen.com/i6264932/8a90ad288f0d4f87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

*   接着再 gulpfile.js 文件中修改一行的配置

browsers:['last 4 version']

image.png

• 之后再在命令行中进行编译，之后查看 text.css 文件源码的变化，可以看到没有任何的变化，这个就证明现在的这个参数修改并不会有任何的变化了

  
  image.png