PostCSS工具
如果你不想从头开始手动设置您的项目,你可以下载本教程中提供的源码附件,提取Gulp或Grunt项目到一个空的文件夹中。
然后在命令终端运行:npm install
。
安装插件
不管你是使用Gulp还是Grunt,在你项目的目录下运行下面的命令:
npm install autoprefixer postcss-color-rgba-fallback postcss-opacity postcss-pseudoelements postcss-vmin pixrem postcss-will-change --save-dev
现在已经安装好插件了,下面我们继续将这些插件加载到您的项目中。
通过Gulp加载插件
如果你使用的是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
文件夹中。
package.json 代码:
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 }
gulpfle.js的配置:
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 });
时间: 2024-11-03 05:44:06