gulp的autoprefixer插件能够根据咱们的设置帮助咱们自动补全浏览器的前缀(如:-moz、-ms、-webkit、-o)css
1)首先安装gulp,不知道怎么安装请看这里html
2)安装autoprefixer插件web
3)主要要在gulpfile.js文件引入autoprefixer,而后在添加autopre任务。完整代码以下gulp
1 // 载入外挂 2 var gulp = require('gulp'), 3 autoprefixer = require('gulp-autoprefixer'); 4 5 gulp.task('autopref', function () { 6 //找到src目录下app.css,为其补全浏览器兼容的css 7 gulp.src('css/basic.css') 8 .pipe(autoprefixer({ 9 browsers: ['last 5 versions', 'Android >= 4.0'], 10 cascade: true, //是否美化属性值 默认:true 像这样: 11 //-webkit-transform: rotate(45deg); 12 // transform: rotate(45deg); 13 remove:true //是否去掉没必要要的前缀 默认:true 14 })) 15 //输出到dist文件夹 16 .pipe(gulp.dest('dist')); 17 });
4)antoprefixer()函数的参数介绍浏览器
browsers:[] (定义使用的浏览器版本)app
cascade : true (定义对属性进行对齐操做)函数
remove : true (去掉没必要要的前缀) ui
browsers的推荐值为:???spa