gulp教程之gulp-autoprefixer

Ooo_My_God发表于 分类:构建工具 阅读(17469) 评论(14)

简介:

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】

1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

2、本地安装gulp-autoprefixer

2.1、github:https://github.com/sindresorhus/gulp-autoprefixer

2.2、安装:命令提示符执行 cnpm install gulp-autoprefixer --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-autoprefixer --save-dev什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

3、配置gulpfile.js

3.1、基本使用

3.2、gulp-autoprefixer的browsers参数详解 (传送门):

last 2 versions: 主流浏览器的最新两个版本

last 1 Chrome versions: 谷歌浏览器的最新版本

last 2 Explorer versions: IE的最新两个版本

last 3 Safari versions: 苹果浏览器最新三个版本

Firefox >= 20: 火狐浏览器的版本大于或等于20

iOS 7: IOS7版本

Firefox ESR: 最新ESR版本的火狐

> 5%: 全球统计有超过5%的使用率

3.3、发现上面规律了吗,相信这不难看出,接下来说说各浏览器的标识:

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

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.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile.

4、执行任务

4.1、命令提示符执行:gulp testAutoFx

5、结束语

5.1、本文有任何错误,或有任何疑问,欢迎留言说明。

下载附件

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/94

相关推荐

评论

网友最新评论 (14)

  1. I can’t bevelie I’ve been going for years without knowing that.

    Roque 06-20 11:48 回复
  2. 不错 很详细 ~ 详细

    Kevinli 12-25 11:47 回复
  3. 2.3、注意:没有安装cnpm请使用 npm install gulp-aotoprefixer –save-dev。

    这里的 gulp-aotoprefixer 拼错了

    upupzealot 02-23 13:49 回复
  4. 学习了,browsers这块的配置挺好的,刚试了下比如改成2.3就可以兼容安卓2.3了,可根据需求灵活配置

    zhaoy 03-11 11:08 回复
  5. 那个置顶的图标为什么要到页面最底下才会出现呢。

    you 04-13 16:27 回复
    • 多谢,有时间马上修正,这样确实用户体验不好,我太懒了

      Ooo_My_God 04-13 16:35
  6. 配置好要怎么使用呢,为啥我的文件还是一样呢

    Young 06-29 14:01 回复
  7. 为什么我执行完gulp testAutoFx,相关的less文件依旧没有加上前缀,border-radius依然没有-webkit-前缀。

    马国梁 10-24 18:28 回复
    • 你好,不懂你browsers参数是怎样配置,border-radius很早的谷歌,火狐版本都不需要加-webkit前缀啦。如果想证实,直接browsers: [“last 20 versions”]当然就会有啦。

      YDCSS 10-26 08:44
    • 恩恩,后来我测试别的样式加前缀加上了,border-radius不需要前缀了。谢谢

      马国梁 10-28 14:52
    • 你好,不懂你browsers参数是怎样配置,border-radius很早的谷歌,火狐版本都不需要加-webkit前缀啦。如果想证实,直接browsers: [“last 20 versions”]当然就会有啦。

      YDCSS 10-26 08:44
  8. 这个插件也是针对CSS的,而且autoprefixer()这个方法也有参数,如果既要编译Less或压缩CSS的,这样方法怎么用呢?

    快乐小神仙 12-10 22:18 回复
  9. 看了你的框架源码才发现看不懂你gulp里的autoprefixer,谷狗里也没解释得很明白,结果最后还是百度到你的博客里来了哈哈。

    望星 06-09 18:39 回复
输入关键字