-1

I am unable to get the autoprefixer working with gulp sass. Here is my gulpfile.js:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer({ browsers: ['last 2 versions' ]}))
    .pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
gulp.task('default', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

I followed the solution in related question but couldn't get it done. Here is the link : LINK

Community
  • 1
  • 1
Peter
  • 10,492
  • 21
  • 82
  • 132

3 Answers3

0

I was able to achieve the sourcemaps and autoprefix functionality so thought of sharing. Here is my gulpfile.js : 

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
gulp.task('default', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
Peter
  • 10,492
  • 21
  • 82
  • 132
0

@Vishal's answer is correct. I found that having autoprefixer and sourcemaps together was not working, ONLY when specifying a folder for the sourcemap's file.

.pipe(sourcemaps.write('/assets/blahblah/blah')

However, I was able to pass params to autoprefixer while leaving the destination folder for sourcemaps empty. It's also important to call the write function BEFORE calling autoprefixer

    return gulp.src('assets/FOLDER/public/scss/styles.scss')
        .pipe(plumber(function (error) {
            gutil.log(error.message);
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
        .pipe(sass({
            style: 'compressed',
            sourceComments: 'normal',
            errLogToConsole: true
        }))
        .pipe(sourcemaps.write())
        .pipe(autoprefixer({ browsers: ['last 2 version', 'ie 9', 'ios 6', 'android 4'], remove: false }))
        .pipe(gulp.dest('assets/FOLDER/dist/css'))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('assets/FOLDER/dist/css'))
        .pipe(notify({ message: 'Styles task complete' }));
});

    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^1.5.4",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^5.0.1"
Rob Scott
  • 7,921
  • 5
  • 38
  • 63
-1

Try to delete autoprefixer package!!

My sourcemaps were crazy references code classes.

This is because autoprefixer is corrupted in gulp. Try uninstall that package and write prefixes in your code by yourself.

Hope this helps!

Worked for me.

Sergio Gómez
  • 1
  • 1