如何使用 Gulp 自动前缀定位所有浏览器答案

【问题标题】：How to target all browsers with Gulp auto-prefixer如何使用 Gulp 自动前缀定位所有浏览器
【发布时间】：2017-03-28 08:52:15
【问题描述】：

我对 Gulp 很陌生，之前从未使用过任何插件，所以我有点迷茫。

我已经学习了一些教程，并且几乎设法让 Gulp 运行和自动前缀插件。我现在只是想弄清楚是否有办法为所有浏览器的所有版本获取它的前缀？

在this browser list，我可以选择所有主要浏览器的最后两个版本或一系列版本，但我想选择所有浏览器的所有版本（主要和其他）。我特别想添加对默认 Samsung 浏览器的支持，因为目前我遇到了一些浏览器兼容性问题，希望一些前缀可以成为解决方案。

这是我目前的代码：

var gulp = require('gulp');
var prefix = require('gulp-autoprefixer');

gulp.task('prefix', function () {
    gulp.src('css/**/*.css')
        .pipe(prefix('last 2 versions'))
        .pipe(gulp.dest('css/'));
});

gulp.task('default', ['prefix']);

谢谢

【问题讨论】：

三星浏览器只是安卓手机吗？
@Barryman9000 不。它是平板电脑 - 三星 Galaxy 8.0，Android 版本 4.4.2，浏览器版本 4.4.2
新的三星浏览器不属于“现代浏览器”的支持级别似乎很奇怪。您可以尝试访问html5test.com 看看缺少什么
哦...我猜 android 4.4 更旧。我的坏

标签： javascript browser gulp build-system gulp-autoprefixer

【解决方案1】：

您可以在此处找到所有前缀选项的列表。我不确定有什么专门针对三星浏览器的

https://github.com/ai/browserslist#queries

所以一个示例自动前缀任务可能看起来像这样

let autoprefixBrowsers = ['> 1%', 'last 2 versions', 'firefox >= 4', 'safari 7', 'safari 8', 'IE 8', 'IE 9', 'IE 10', 'IE 11'];

gulp.task('prefix', function () {
    gulp.src('css/**/*.css')
    .pipe(prefix({ browsers: autoprefixBrowsers }))
    .pipe(gulp.dest('css/'));
});

【讨论】：