I'm unable to get Autoprefixer to work with Gulp. I'm using opacity in my CSS, gradients, and transforms and there aren't any vendor prefixes showing up. Otherwise, everything else is working.
Here's my gulp file:
var gulp = require('gulp');
var lr = require('tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');
var onError = function (err) {
gutil.beep();
console.log(err);
};
gulp.task('lint', function() {
return gulp.src('js/all.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
.pipe(gulp.dest(''))
.pipe(plumber({
errorHandler: onError
}))
.pipe(livereload(server));
});
gulp.task('scripts', function() {
return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js'])
.pipe(concat('all.js'))
.pipe(gulp.dest('js/min'))
.pipe(rename('main.min.js'))
.pipe(gulp.dest('js/min'))
.pipe(plumber({
errorHandler: onError
}))
.pipe(livereload(server));
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('**/*.php').on('change', livereload.changed);
gulp.watch('js/*.js', ['scripts']);
gulp.watch('scss/**/*.scss', ['sass']);
});
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
.pipe(gulp.dest(''))
to a specific directory (like this answer suggested), without any luck.I appreciate any help you can offer.
* UPDATE *
I'd like to note my naivety on Autoprefixer adding a prefix for opacity, which it obviously does not.
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
Autoprefixer can be easily integrated with Sass and Stylus, since it runs after CSS is already compiled.
This gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');
function onError(err) {
console.log(err);
}
gulp.task('sass', function(){
return gulp.src('src/style.scss')
.pipe(sass())
.pipe(prefix('last 2 versions'))
.pipe(minify())
.pipe(gulp.dest('css/'))
.pipe(plumber({
errorHandler: onError
}))
});
With this scss:
body {
opacity: .5;
box-sizing: border-box;
transform: scale(.5);
display: flex;
}
Produces this output:
body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
So, I'm not sure what I'm doing different exactly except that I list my browsers differently. But I assume you've tried removing those etc.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With