后处理器概解读
Autoprefixer SublimeText 和 Gulp 安装
插件github网址：https://github.com/sindresorhus/sublime-autoprefixer
安装步骤
- 打开 sublime text3 编辑器
ctrl + shift + p - 输入
install package选中下图所示的选项
- 之后再输入
Autoprefixer，直接选中自动安装即可 - 安装之后设置快捷键 找到 sublime 顶部菜单依次选择 首选项 -> 快捷键设置 之后就如下图所示
- 在右侧的 User 下面新增设置的代码，之后保存即可 ``` { “keys”: [“ctrl+shift+a”], “command”: “autoprefixer” }
结果如下图> ####测试- 在桌面新建一个 test.css 文件并拖拽至 sublime 中进行编辑- 首先给 div 写一个 display:flex; 的样式之后按上面设置的快捷键组合 `ctrl + shift + a` 就可以自动填充前缀名了> ####扩展- 可以自行设定 填充几种或者是什么样的类型> - 默认的就是上图中的 ms 和 webkit ，下面演示在 设置中怎么添加的- 在 sublime 编辑器的顶部菜单中依次选择 首选项 -> Package Setting -> Autoprefixer 打开的是如下图所示的配置面板 左侧是默认的 右侧是用户自定义的，之后编辑右侧的文件，加入下面的代码
“browsers”: [“last 4 version”]
最后结果如下图所示> ####结合 Gulp 配置- 一般情况下都是不会手动的去增加的，一般都是通过工具来自动的填充的> 工具 npmjs 网址：[https://www.npmjs.com/package/autoprefixer](https://www.npmjs.com/package/autoprefixer)<br />在网址的下面 [https://www.npmjs.com/package/autoprefixer#usage](https://www.npmjs.com/package/autoprefixer#usage) 写的有使用 Gulp、Webpack 或者是 Grunt 的使用示例<br /><br /><br />- 使用 Gulp 时用到的扩展插件 [grunt-postcss](https://github.com/nDmitry/grunt-postcss)> <br />####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
> - 此时在 sublime 中查看项目文件，会发现自动增加了一个 dest 目录且目录里面有一个 text.css 源码如下，可以看到这个填充、压缩、打包、合并都做好了> - 接着再 gulpfile.js 文件中修改一行的配置
browsers:[‘last 4 version’]
```
- 之后再在命令行中进行编译，之后查看 text.css 文件源码的变化，可以看到没有任何的变化，这个就证明现在的这个参数修改并不会有任何的变化了
若有收获，就点个赞吧
0 人点赞
