gulp 插件之 gulp-autoprefixer

2024-11-24 技术教程

gulp-autoprefixer 的简介：

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

一、gulp-autoprefixer 插件的使用

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

npm install --save-dev gulp-load-pluginsgulp-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.