gulp file:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
var precss = require('precss');
var csswring = require('csswring');
var concat = require('gulp-concat');
gulp.task('css', function () {
var processors = [
//autoprefixer('last 6 versions'),
cssnext({ browsers: ['last 6 versions'] }),
precss,
csswring
];
return gulp.src('./src/main.css')
.pipe(postcss(processors))
.pipe(concat('style.css'))
.pipe(gulp.dest('.'));
});
gulp.task('watch', function() {
gulp.watch('src/*.css', ['css']);
});
I'm having an issue getting autoprefixer to work. I'm doing a transform on an element, but I see no vendor prefixes being added. Apparently with postcss-cssnext, autoprefixer is supposed to be included in it, so I passed the options through that. I'd tried regular autoprefixer and no luck, either. I get no warnings in the command line when I run my watch task.
UPDATE By moving autoprefixer to the end, I got it to work, using the same syntax I did for cssnext. However, I would like it if I could stop using autoprefixer altogether, since it's supposed to be included in cssnext anyway. I'm still not sure how to do this.