CODEWITHSUNDEEP
javascriptbrowsergulpbuild-systemgulp-autoprefixer
mrseanbaines
mrseanbaines

Reputation: 833

How to target all browsers with Gulp auto-prefixer

I am very new to Gulp and have never used any plugins before so I'm a bit lost.

I have followed some tutorials and just about managed to get Gulp running and the auto-prefixer plugin. I am now just trying to work out if there is a way to get it it prefix for all versions of all browsers?

On this browser list, I can select things like the last 2 versions of all major browsers, or a range of versions, but I would like to select all versions of all browsers (major and other). I am especially trying to add support for the default Samsung browser, as I am having some browser compatibility issues with that at the moment and am hoping some prefixes could be the solution.

Here is the code I have so far:

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']);

Thanks

Upvotes: 3

Views: 5185

Answers (1)

Duderino9000
Duderino9000

Reputation: 2597

You can find a list of all the prefix options here. I'm not sure there's anything to target a Samsung browser specifically

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

So an example autoprefixer task might look like this

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/'));
});

Upvotes: 5

Related Questions