Gulp gulp-less and gulp-sourcemaps giving wrong sourceMappingURL

Question

I have a gulp workflow with a simple less task like so:

gulp.task('less', function() {
    gulp.src(source_less)
        .pipe(sourcemaps.init())
        .pipe(less({
            sourceMap: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dest_less));
});

I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file. But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file. Instead, it displays something like this:

/*#     sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
        VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
        ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
        sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

I dramatically simplified my gulpfile, removing livereload, autoprefixer and such. But even in this stripped down version I can't get the source URL to be right.

Been over this thing for quite some time now, any help would be very much appreciated!

score 2 · Accepted Answer · answered Oct 15 '14 at 09:13

2

You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n    background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}

Try it yourself here: https://www.base64decode.org/

answered Oct 15 '14 at 09:13

Heikki

15,329
2
54
49

This is also what I get when I use a distinct file for sourcemaps. But how do I get a non-base64 version inline? I just want something above my CSS statement like 'sourceMappingURL=/some/path/to/file.less', but can't get it to work. – Nicky Oct 15 '14 at 09:45
2

SourceMappingURL is _not_ a path to source file. It is a path to *source map* or the source map itself if it's inlined. So inline source map is exactly what you have there now. – Heikki Oct 15 '14 at 09:56
I clearly was expecting it to work in a whole different way. Thanks for the heads up! – Nicky Oct 15 '14 at 11:08

score 1 · Answer 2 · answered Sep 01 '16 at 12:58

1

For those who stumble upon this post and are wondering how to get a separate file for the map that's is not in base64 format - you can pass a path relative to the destination.

For example:

.pipe(sourcemaps.write('./'))

answered Sep 01 '16 at 12:58

Chase Oliphant

379
2
5

Gulp gulp-less and gulp-sourcemaps giving wrong sourceMappingURL

2 Answers2