PostCSS: 跨浏览器兼容性
2021-07-03 03:07
标签：源码 function turn process ret src ice author tar 如果你不想从头开始手动设置您的项目，你可以下载本教程中提供的源码附件，提取Gulp或Grunt项目到一个空的文件夹中。 然后在命令终端运行： 不管你是使用Gulp还是Grunt，在你项目的目录下运行下面的命令： 现在已经安装好插件了，下面我们继续将这些插件加载到您的项目中。 如果你使用的是Gulp，在你的 并且将这些变量的名称添加到你的 做一个快速测试，在命令终端运行 【参考文章1】 【参考文章2】 package.json 代码： gulpfle.js的配置： PostCSS: 跨浏览器兼容性 标签：源码 function turn process ret src ice author tar 原文地址：http://www.cnblogs.com/miny-simp/p/7126301.htmlPostCSS工具
npm install。安装插件
npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev
通过Gulp加载插件
gulpfile.js加载这些变量：var autoprefixer = require(‘autoprefixer‘);
var color_rgba_fallback = require(‘postcss-color-rgba-fallback‘);
var opacity = require(‘postcss-opacity‘);
var pseudoelements = require(‘postcss-pseudoelements‘);
var vmin = require(‘postcss-vmin‘);
var pixrem = require(‘pixrem‘);
var will_change = require(‘postcss-will-change‘);
processors数组中：var processors = [
will_change,
autoprefixer,
color_rgba_fallback,
opacity,
pseudoelements,
vmin,
pixrem
];
gulp css，检查style.css文件有没有放到dest文件夹中。 1 {
2 "name": "gulppostcssstarter",
3 "version": "1.0.0",
4 "description": "Basic starter project for PostCSS use via Gulp",
5 "author": "Kezz Bracey",
6 "license": "MIT",
7 "devDependencies": {
8 "autoprefixer": "^5.2.0",
9 "gulp": "^3.9.0",
10 "gulp-postcss": "^5.1.10",
11 "pixrem": "^1.3.1",
12 "postcss-color-rgba-fallback": "^1.3.1",
13 "postcss-opacity": "^2.0.1",
14 "postcss-pseudoelements": "^2.2.0",
15 "postcss-vmin": "^1.0.0",
16 "postcss-will-change": "^0.2.0"
17 }
18 }
1 var gulp = require(‘gulp‘);
2 var postcss = require(‘gulp-postcss‘);
3
4 var autoprefixer = require(‘autoprefixer‘);
5 var color_rgba_fallback = require(‘postcss-color-rgba-fallback‘);
6 var opacity = require(‘postcss-opacity‘);
7 var pseudoelements = require(‘postcss-pseudoelements‘);
8 var vmin = require(‘postcss-vmin‘);
9 var pixrem = require(‘pixrem‘);
10 var will_change = require(‘postcss-will-change‘);
11
12 gulp.task(‘css‘, function () {
13 var processors = [
14 will_change,
15 autoprefixer({
16 browsers: [‘> 1%‘,‘last 2 versions‘, ‘ie >=8‘, ‘Firefox > 20‘, ‘Chrome > 31‘]
17 }),
18 color_rgba_fallback,
19 opacity,
20 pseudoelements,
21 vmin,
22 pixrem
23 ];
24 return gulp.src(‘./src/*.css‘)
25 .pipe(postcss(processors))
26 .pipe(gulp.dest(‘./dest‘));
27 });
下一篇：web前端面试题系列：（二）