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


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

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

  • 相关阅读:
    无法作为数据库主体执行,因为主体 "dbo" 不存在、无法模拟这种类型的主体,或您没有所需的权限
    sql server 2008收缩数据库日志
    c#基本语法
    写点东西
    转载 程序人生成长发展中的一些感悟
    C#基本问题
    对象入门
    21k8s部署discuz
    Mysql基础管理
    将枚举作为参数,迭代枚举。Passing Enum type as a parameter
  • 原文地址:https://www.cnblogs.com/Gherardo/p/7068583.html
Copyright © 2020-2023  润新知