gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

时间:2022-02-21 06:32:01

。相信所有的前端攻城狮。听到浏览器兼容性问题都深有体会。

浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。还有就是根据浏览器的版本不同,所兼容的css属性有所差异。

今天我们借助gulp工具全局跑css文件,实现自动补全,在各个浏览器的写法补全。至于属性兼容还需要具体情况具体对待。

1:全局安装gulp .  cmd    cnpm/npm install gulp -g (cnpm/npm自己选择,个人建议用cnpm)

2:安装完成查看是否安装成功   gulp -v   出现版本号则表示成功

3:cd进你的项目,本人建议在desktop新建一个文件夹(我的叫gulp css专门编译css)。cd进入 执行npm init 创建package.json 文件。一路按回车就行了

gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

4:安装构建化工具gulp-autoprefixer   cd到你的项目路径下(桌面新建的文件夹下)  执行 npm install gulp-autoprefixer --save-dev  耐心等待安装完成

gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

5:在新建的文件夹(gulp)下手动新建添加gulpfile.js文件。gulpfile.js里面的内容为:(直接copy进去)

var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'); gulp.task('testAutoFx', function () {
gulp.src('css/announcement.css') //单个css文件
// gulp.src(['css/detail.css','css/detail_old.css','css/home.css','css/home_new.css','css/main.css','css/main_new.css']) //如果有多个css文件 gulp.src(['src/css/index.css','src/css/index1.css'])
.pipe(autoprefixer({
browsers: ['last 4 versions', 'Android >= 4.0'], //适配到浏览器最新的几个版本
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认:true
}))
.pipe(gulp.dest('dist/css')); //dist 输出编译后的css路径
});

6:cd 进你的项目本地 全局安装gulp  执行npm install gulp

7:执行gulp testAutoFx

gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

最后你的文件夹会多个dist文件夹,里面放的就是gulp后的css文件。对比下

gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

gulp前端构建化工具,帮你搞定不同浏览器的兼容性写法问题

具体也可以参考:http://www.ydcss.com/archives/18#lesson5