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