Help adding autoprefixer to gulp file

[dsgnr]

Hi everyone,

I am trying (struggling) to add autoprefixer to my gulp file.

My current set up is:

• look for sass file changes
• convert to css
• minify css
• refresh browser with browser sync

Obviously I’d like to add autoprefixer before the css file is minified. I had some luck adding it in but it didn’t actually change the css file and no errors appeared.

Here is my working gulp file.

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
var browsersync = require('browser-sync');

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('lib/themes/domain/styles/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('lib/themes/domain/'));
});

gulp.task('uglify', function () {
  gulp.src('lib/themes/domain/style.css')
    .pipe(uglifycss({
      "max-line-len": 80
    }))
    .pipe(gulp.dest('lib/themes/domain/'));
});

var browserSync = require('browser-sync').create();
var urlPath = "local.domain.dev";

gulp.task('browser-sync', function (cb) {
    browserSync.init({
        proxy: urlPath,
    }, function() {
        gulp.watch('lib/themes/domain/<em>.php').on("change", browserSync.reload);
        gulp.watch('lib/themes/domain/styles/</em>/<em>.scss', ['sass']).on("change", browserSync.reload);
        gulp.watch('lib/themes/domain/styles/</em>.scss', ['sass']).on('change', browserSync.reload);
        gulp.watch('lib/themes/domain/style.css').on('change', function () {
            gulp.src('lib/themes/domain/style.css')
            .pipe(browserSync.stream());
        });
        cb();
    });
});

gulp.task('default', ['browser-sync']);

If someone can help me here that would be great. It’s working perfectly but not autoprefixer.

Please don’t just send me to a link to copy some code as I’ve tried that with no luck and without completely rewriting my gulp file.

Thanks

[Author]

Posts