gulp-sass autoprefix sourcemap

Question

This weekend I started playing around with gulp. I wanted to set up a task which can

• compile my sass files
  • keep working if I make mistakes in the sass file
  • work with sass Bootstrap
• generate sourcemaps
• append browser prefixes
• inject the compiled css wihtout browser reload
• fast (1-2 s top in dev env)

I got most of the steps but browser prefixes gave me a hard time Here is what I got so far

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

var config = {
    sassPath: './sass',
    bower: './bower_components',
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
    fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};

gulp.task('sass', function () {
    return gulp.src(config.sassPath + '/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                includePaths: [
                    config.sassPath,
                    config.bower,
                    config.bootstrap
                ],
                onError: function (err) {
                    notify().write(err);
                }
            }))
            .pipe(concat('app.css'))
            .pipe(autoprefixer('last 2 version'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css'))
        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('browser-sync', function() {
    browserSync({
        logLevel: "info",
        server: {
            baseDir: './',
            //directory: true,
            routes: {
                "/fonts": config.fonts
            }
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch(['./**/*.html', 'js/**/*.js'], reload);
    gulp.watch('sass/*.scss',['sass']);
});

The problem is that the autoprefixer gives me an error and messes up the sourcemaps

The error I get: "gulp-sourcemap-write: source file not found:C:\WEB\skilldrill_v1\skilldrill\sass\app.css"

So for some reason it tries to find the css files in the sass dir

[Edit]
I managed to locate the problem, but couldn't solve it yet. The pipe this thing works: gulp-autoprefixer -> do some stuff -> prefixing tasks -> vinyl-sourcemaps-apply

On the 35th line of gulp-autoprefixer\index.js: applySourceMap(file, res.map.toString()); From this point the vinyl-sourmaps-apply understands that the current file (in my case app.css) becomes a source too.

Here are the problems: a) it thinks that the css file is in the same folder as specified in gulp.src() which is usually not true b) it doesn't work only with the lines added by the autoprefixer, but adds reference to every single line

Do you have any ideas based on this information ? I started digging in the gulp-concat which handles a similar issue properly.

Answer 1

I've had the same issues with autoprefixer and sourcemaps. I've changed my workflow to create sourcemaps after compiling sass, then loading into gulp-sourcemaps again when I run autoprefixer, and finally creating updated sourcemaps.

// Compile Sass
.pipe(sourcemaps.init())
    .pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('../public/assets/css'))

// Autoprefix
.pipe(sourcemaps.init({loadMaps: true}))
    .pipe(autoprefixer('last 2 version', 'ie 8', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('../public/assets/css'))

And then only watching css files for style injection.

// CSS Injection
.pipe(filter('**/*.css'))
.pipe(browserSync.reload({stream:true}))