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

浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。还有就是根据浏览器的版本不同,所兼容的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 文件。一路按回车就行了

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

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

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

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

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

  1. app自动化 - 元素定位不到?别慌,3大工具帮你搞定!

    在日常的android app自动化测试工作当中,很多朋友在元素定位时,会遇到以下类似的报错: 然后会来问,这是啥情况? 一般情况下,都会送上以下亲切的关怀: 1)adb能识别到设备吗? 2)设备有被 ...

  2. 一个小工具帮你搞定实时监控Nginx服务器

    Linux运维工程师的首要职责就是保证业务7 x 24小时稳定的运行,监控Web服务器对于查看网站上发生的情况至关重要.关注最多的便是日志变动,查看实时日志文件变动大家第一反应应该是'tail -f ...

  3. 前端的构建化工具Webpack

    经常看到如jquery-3.0.0.js和jquery-3.0.0-min.js等两相似的文件名. 其实以上两个文件名的内容是一样的,不过带min代表的是占用最小的空间,为项目提高性能.压缩的部分如换 ...

  4. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  5. gulp 前端构建工具使用

    gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...

  6. Gulp前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...

  7. 前端实战Demo:一张图片搞定一页布局

    对前端程序员来说,从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功,但是一般的程序员可能对切图并非那么熟悉,所以可能有很多时间都花在使用Photoshop上,那么这里就有一种方法可以减 ...

  8. 4款APP原型设计工具助你搞定移动应用设计!

    随着信息化社会的不断发展,不仅手机迭代更新的速度飞快,就连手机里的App 也层出不穷.作为一名UI/UX设计师或产品经理,如何才能设计一款出色的移动App?光有好的创意是不够的,你还需要一款正确的Ap ...

  9. gulp前端构建工具的搭建

    我的机器: 3.13.0-32-generic #57-Ubuntu SMP Tue Jul 15 03:51:08 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux 1 ...

随机推荐

  1. prometheus rules

    prometheus 持久查询 有三种方法可以使我们的持久查询(不用每次都要输入查询规则): 记录规则  -  从查询中创建新的指标. 警报规则  -  从查询生成警报. 可视化  -  使用像Gra ...

  2. 解决Ubuntu 17.10设置面板打不开的问题

    问题描述 对于Ubuntu桌面系统我用得不多,最近安装了Ubuntu17.10使用,一直都没遇到什么大的问题,界面风格已经与Windows很相似,总体体验还不错.直到某一天我突然手痒痒把Dock面板从 ...

  3. Mysql漏洞修复方法思路及注意事项

    [系统环境] 系统环境:Red Hat Enterprise Linux Server release 5.4 (Tikanga)  +  5.7.16 MySQL Community Server  ...

  4. rem是怎么计算的

    「rem」是指根元素(root element,html)的字体大小,从遥远的 IE6 到版本到 Chrome 他们都约好了,根元素默认的 font-size 都是 16px. rem是通过根元素进行 ...

  5. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  6. ch03 课下作业——缓冲区溢出漏洞实验

    一.实验简介: 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器和返回地址的暂时关闭 ...

  7. Django模型层-单表操作

    ORM介绍 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人员的 ...

  8. k64 datasheet学习笔记26--Oscillator (OSC)

    1.前言 OSC模块是一个晶体振荡器. 该模块使用晶体或谐振器与外部连接,为MCU产生一个参考时钟. 主要为下图红色框住的部分 2.特性和模式 Supports 32 kHz crystals (Lo ...

  9. 新闻API接口

    最近很多大学生为了完成作业,或者刚开始接触android的问我要新闻APP的源码,其实就是个很小的demo,以前自己也是学着别人敲得的代码,现在自己整理了一份体积很小,代码注释非常详细的新闻APP.提 ...

  10. Linker errors in Android NDK (undefined reference to `__cxa_end_cleanup')

    在 Android 中移植一个库(该库 使用了 libstlport )时 产生如下错误: ./obj/local/armeabi/objs/jniWrapper/native.o: In funct ...