网站建设资讯

NEWS

网站建设资讯

gulp插件之gulp-autoprefixer-创新互联

gulp-autoprefixer 的简介:

创新互联建站是一家集网站建设,丛台企业网站建设,丛台品牌网站建设,网站定制,丛台网站建设报价,网络营销,网络优化,丛台网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

      gulp-autoprefixer 插件用来自动给 css 文件样式添加浏览器前缀。

一、gulp-autoprefixer 插件的使用

1、安装 “gulp-autoprefixer”插件命令(在终端进入到项目根目录执行)

      npm install --save-dev  gulp-load-plugins gulp-autoprefixer

2、在项目根目录下提供 "gulp-autoprefixer" 插件任务配置需要的 src 目录和源文件(源文件放置到 src 目录下)

       mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-autoprefixer"

 具体示例:
var gulp = require('gulp'),
   plugins = require('gulp-load-plugins')();       // 装载插件

gulp.task('autoprefixer', function () {             // 自定义 "autoprefixer" 任务
  return gulp.src('src/css/*.css')                // 模糊匹配 src/css 目录下所有 css 文件
    .pipe(plugins.autoprefixer({                // 调用 gulp-autoprefixer 插件
            browsers: ['last 2 versions','Android >= 5.0'],    // 定义浏览器参数
            cascade: true,                   // 是否添加浏览器前缀,默认:true
            remove: true                   // 是否移除不必要的浏览器前缀,默认:true
    }))
    .pipe(gulp.dest('dist/css'));                // 目标文件存放路径
});

// gulp-autoprefixer 插件的 browsers 参数值详解
    last 2 versions: 主流浏览器的最新两个版本
    last 1 Chrome versions: 谷歌浏览器的最新版本
    last 2 Explorer versions: IE 的最新两个版本
    last 3 Safari versions: 苹果浏览器最新三个版本
    Firefox >= 20: 火狐浏览器的版本大于或等于20
    Firefox ESR: 最新ESR版本的火狐
    > 5%: 全球统计有超过 5% 使用率的浏览器
// 前面为浏览器缩写,后面是浏览器全称
    Android for Android WebView.
    Chrome for Google Chrome.
    Firefox or ff for Mozilla Firefox.
    Explorer or ie for Internet Explorer.
    iOS or ios_saf for iOS Safari.
    Opera for Opera.
    Safari for desktop Safari.
    BlackBerry or bb for Blackberry browser.
    FirefoxAndroid or and_ff for Firefox for Android.
    ExplorerMobile or ie_mob for Internet Explorer Mobile.

4、最后在终端运行 "gulp autoprefixer" 命令

PS:如果没有错误提示信息,证明就没什么问题了。现在去项目根目录下看是否已经生成了 "dist/css" 目录和目标文件。未完待续。。。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:gulp插件之gulp-autoprefixer-创新互联
网页网址:http://cdweb.net/article/dcppoo.html