How to use in combination with gulp-sass

Hi,

Im trying to use gulp-autoprefixer in combination with gulp-sass and gulp-sourcemaps. My gulpfile task looks like this:

gulp.task('sass', function () {
  gulp.src( config.SASS.src )
    .pipe( plugins.sourcemaps.init() )
    .pipe( plugins.sass() )
    .pipe( plugins.autoprefixer (
      "last 1 versions", "> 10%", "ie 9"
      ))
    .pipe( plugins.sourcemaps.write('./') )
    .pipe( gulp.dest( config.SASS.build ) )
    .pipe( browserSync.reload({ stream: true }) );
});

The plugins. prefix is related to gulp-load-plugins

Without gulp-sass the task runs fine, but with it it throws the following error:

[08:26:51] Finished 'sass' after 3.32 ms
gulp-sourcemap-write: source file not found:/Users/luismartins/Sites/00_LAB/wp-multisite/wp-content/themes/wip053/src/sass/main.css

Should I be running autoprefixer as a separate task after CSS compilation?

Thanks.

[subblue]

I’ve had all the various sourcemap problems reported when trying to use gulp-sass, gulp-sourcemap and gulp-autoprefixer. After fiddling around for ages this is the final task template that works for me:

gulp       = require('gulp');
sass       = require('gulp-sass'); // 1.0.0
sourcemaps = require('gulp-sourcemaps');  // v1.2.2
autoprefix = require('gulp-autoprefixer');  // v1.0.1

gulp.task('styles', function() {
  return gulp.src('src/scripts/app/app.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({errLogToConsole: true}))
    .pipe(sourcemaps.write({includeContent: false, sourceRoot: '.'}))

    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefix({browsers: ['last 1 version', 'iOS 6'], cascade: false}))
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: '../scripts/app'}))

    .pipe(gulp.dest('www/css'));
});

The things that made it work for me are wrapping sourcemaps calls around the sass and autoprefixer separately, passing the maps from the first into the second (with loadMaps) and the includeContent and sourceRoot options passed into the sourcemaps.write() methods.

Because the source maps don’t include the original content I’m allowing my dev server access to the original .scss files too, so that from the Chrome dev console I can click on the scss file name and view the original source directly. The dev console actually feels a little snappier this way too with large stylesheets.

The line numbering to the original file is slightly out due to autoprefixer adding the additional prefixed lines, but the important thing is that very quickly and with low friction I can find the style settings in the original .scss file.

[pjlong]

@justnorris. Looks like @ahdinosaur’s solution was working all along. You will have to upgrade to gulp-sass 2.x branch, however: npm install dlmanning/gulp-sass#2.x (and make sure to update to the most recent node-sass as well).

Here’s the bare-bones implementation:

gulp.task('sass', function () {
    return gulp.src(paths.css.src_files)
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.css.dist));
});

Note: this is only for inline maps, I don’t think I’ve successfully got external maps to work.