sourcemap

[newtonianb]

I'm using event-stream so that I can compile SASS and merge it with CSS in one task. It's working great my only problem is the sourcemap is getting merged inside the CSS.

gulp code

    gulp.task('css', function(){

        var sassGlob = "assets/css/**/*.scss";
        var cssGlob = "assets/css/**/*.css";;
        var dest = "./dist/css/min/'";

        // compile sass
        var sassFiles = gulp.src(sassGlob)
        .pipe(plugins.rubySass({
            style: 'expanded',  precision: 2
        }));

        // concatenate css + compiled sass
        return es.concat(gulp.src(cssGlob), sassFiles)
            .pipe(plugins.concat('style.min.css'))
            .pipe(gulp.dest(paths.styles.dest));
    });

source: main.SCSS

    header {
      padding: 2px;
    }

source: main2.css

    body {
        padding: 2px;
    }

output: style.min.css

    body {
        padding: 2px;
    }

    header {
      padding: 2px;
    }

    /*# sourceMappingURL=main.css.map */

    {
    "version": 3,
    "mappings": "AAAA,IAAK;EACD,OAAO,EAAE,GAAG",
    "sources": ["../main.scss"],
    "names": [],
    "file": "main.css"
    }

Things I've tried

1) tried: setting sourcemap of rubySass to 'none' result: no difference

    .pipe(plugins.rubySass({
        style: 'expanded', sourcemap: 'none', precision: 2
    }));

1. tried: gulp-concat-sourcemap, this creates my external sourcemap file but I still also have it inside my style.min.css

    return es.concatSourceMap(gulp.src(cssGlob), sassFiles)
            .pipe(plugins.concat('style.min.css'))
            .pipe(gulp.dest(paths.styles.dest));

When I inspected the output of the resulting sourcemap I noticed this

    {
      "version": 3,
      "file": "style.min.css",
      "sources": [
        "assets/css/other.css",
        "main2.css",
        "main2.css.map"
      ],
      "names": [],
      "mappings": "AAAA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;;ACLA;AACA;AACA;AACA;AACA;AACA;AACA"
    }

Based on that it seems it's concatenating the .map file to the CSS which is the behavior we see. So I tried to filter it out.

3) tried: using gulp-filter to filter out the map file from being concatenated in the css result: no difference

    return es.merge(cssFiles, sassFiles)
            .pipe($.filter("!*.map))

"))

[mikestreety]

Interesting. Mind sharing your file structure and full gulp file? 

[newtonianb]

Hi @mikestreety I've reproduced the problem here in this repo https://github.com/newtonianb/gulp-sourcemap-bug

You can see after running gulp css in ./dist/assets/css/style.min.css the sourcemap is part of the css file

[mikestreety]

Sorry, bit confused about what the problem is?

[newtonianb]

@mikestreety the problem is the sourcemap is getting placed inside the CSS !

    body {
        padding: 2px;
    }

    header {
      padding: 2px;
    }

    /*# sourceMappingURL=main.css.map */

    {
    "version": 3,
    "mappings": "AAAA,IAAK;EACD,OAAO,EAAE,GAAG",
    "sources": ["../main.scss"],
    "names": [],
    "file": "main.css"
    }

[mikestreety]

This is expected behaviour. Gulp ruby sass does allow you to pass in some parameters of you wish to have them as separate files. In my gulp file I only generate them if the dev flag is activated. 

[mikestreety]

What if you set sourcemap: 'map' as per things you've tried number 1?