I just copied the sample at https://www.npmjs.com/package/gulp-autoprefixer after I installed gulp
and gulp-autoprefixer
:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('default', function () {
return gulp.src('src/a.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dest'));
});
and I have following in my a.css
:
@keyframes x {
from { left: 0; }
to { left: 100%; }
}
after I gulp
, I get a.css
in desc, but with the exact same code as the original. No -webkit-
is added, but from http://caniuse.com/#search=keyframes it should be prefixed for Android Browser, which is my target device.
Am I missing something?
The caniuse site specifies that keyframes are supported back to 4.3 without the need to prefix.
In gulp you have specified that prefixing should occur for the last 2 versions of browsers. Meaning prefixing will be based on rules set out by browsers from two versions previous:
browsers: ['last 2 versions']
If you want to support Android from a much earlier version then play around with the browsers option in the autoprefixer module:
browsers: ['last 5 versions']