温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

gulp 插件之 gulp-autoprefixer

发布时间:2020-08-01 13:48:05 阅读:1247 作者:珞辰 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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" 目录和目标文件。未完待续。。。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×