Added recipe: Sourcemaps with Sass (gulp-sass) and Autoprefixer.

[superbiche]

(sindresorhus/gulp-autoprefixer#8)

[sondr3]

Do you really need plumber and such? I'm currently using this setup (straight copy-pasta from my own gulpfile):

// Compiles the SASS files and moves them into the "assets/stylesheets" directory
function styles() {
  // Looks at the style.scss file for what to include and creates a style.css file
  return gulp.src("src/assets/scss/**/*.scss")
    // Start creation of sourcemaps
    .pipe($.sourcemaps.init())
      .pipe($.sass({
        errLogToConsole: true
      }))
      // AutoPrefix your CSS so it works between browsers
      .pipe($.autoprefixer("last 1 version", { cascade: true }))
    // Write the sourcemaps to the directory of the gulp.src stream
    .pipe($.sourcemaps.write("."))
    // Directory your CSS file goes to
    .pipe(gulp.dest(".tmp/assets/stylesheets/"))
    // Outputs the size of the CSS file
    .pipe($.size({title: "styles"}))
    // Injects the CSS changes to your browser since Jekyll doesn't rebuild the CSS
    .pipe(reload({stream: true}));
}

And I haven't had any issues with it at all. Note that this is for Gulp 4 though but it should work with Gulp 3 as well.

[sindresorhus]

This is invalid as it doesn't take into account the autoprefixer transform, which means the source map will be out of sync.

[stevemao]

google/web-starter-kit@8c356e1

[phated]

remove plumber

[stevemao]

ping

[glen-84]

I'm a bit confused. When mixing SASS and autoprefixer, what should the source point to? SASS files or CSS before the prefixing?

I guess I'm asking what is the expectation when more than one mapping is required.

Here is my current task (ES2015):

gulp.task("build-css", () => {
    return gulp.src(cssSrc)
        .pipe(sourcemaps.init())
        .pipe(newer({
            dest: cssDest,
            ext: ".css"
        }))
        .pipe(print((filepath) => {
            return `Building '${filepath}'`;
        }))
        .pipe(sass({
            // See: https://github.com/sass/node-sass/issues/957
            //outputStyle: "compressed"
        }).on("error", sass.logError))
        .pipe(autoprefixer({
            // Default for Browserslist (https://github.com/ai/browserslist) @ 2015/09/18
            browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
        }))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(cssDest));
});

It seems to point to the "compiled" CSS file, which is not so useful. Ideally, it should point to the SCSS, as that is the true "source" (files exist, and that is where you would make changes). Is it possible to use autoprefixer without it affecting the CSS -> SCSS sourcemap? It doesn't seem like it would be.

If you can autoprefix the SCSS first (which should be possible), then at least the loaded source (sourcesContent) should map properly, but the lines wouldn't match with the file-based source.

I'm not really sure what the best option is, if any. 😞

Edit: See dlmanning/gulp-sass#354

[phated]

Closing for inactivity. Please reopen once my comments are fixed.