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

浏览器兼容性问题,无非就是因为浏览器内核不同,浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。还有就是根据浏览器的版本不同,所兼容的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. Hadoop记录- Yarn Job MAX

    #!/bin/sh #yarn job status:NEW.NEW_SAVING.SUBMITTED.ACCEPTED.RUNNING.FINISHED.FAILED.KILLED nnum=$(/ ...

  2. Docker下安装rabbitmq

    拉取镜像 docker pull rabbitmq:-management 启动镜像(默认用户名密码),默认guest 用户,密码也是 guest docker run -d --: -p : rab ...

  3. [物理学与PDEs]第2章第1节 理想流体力学方程组 1.1 预备知识

    1.  理想流体: 指忽略粘性及热传导的流体. 2.  流体的状态 (运动状态及热力学状态) 的描述 (1)   速度向量 $\bbu=(u_1,u_2,u_3)$: 流体微元的宏观运动速度. (2) ...

  4. springMVC中 @RequestParam和@RequestBody的区别

    首先,不可以同时传进@RequestParam和@RequestBody,好像可以传进两个@RequestParam 如果不加@requestparam修饰,相当于 加上@requestparam且各 ...

  5. 版本控制工具 - Git

    版本控制工具 - Git 安装完成后,打开Git Bash,这是一个命令行工具,用于操作仓库和仓库的文件.你可以通过命令将已经存在的项目变成仓库,也可以重新创建一个新项目再通过命令将其变成仓库,还可以 ...

  6. Find K Closest Elements

    Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...

  7. wireshark如何抓取localhost包

    1.首先安装NPCAP 下载地址:https://nmap.org/download.html 安装时,记得勾上最后一个选项:wincap模式 安装完成后,一定要重启系统 2.安装wireshark ...

  8. canvas图片与img图片的相互转换

    最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等.查找了一些资料归纳总结了一些知识. 默认在jq库里进行,引入jquery.qrcode.min. ...

  9. iOS -- Effective Objective-C 阅读笔记 (5)

    1: 理解 '对象等同性' 概念 理解: 根据'等同性' 来比较对象是一个非常有用的功能, 不过按照 == 操作符比较出来的结果未必是我们想要的, 因为该操作比较的是两个指针本身, 而不是其所指的对象 ...

  10. JavaScript入门学习笔记(表单验证)

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...