Sourcemap are broken when used with sourcemaps.init

[vitrilo]

Example from the doc dont work, it produce broken map file:

• Unusabe in browser
• Inside you may notice emty "mappings" part
• Map file contains only one source file (even web pack compiled several)
• js file contains duplicated "//# sourceMappingURL=app.js.map" line

Below example from doc AS-IS:

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var through = require('through2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('default', function() {
  return gulp.src(['src/app.js', 'test/test.js'])
    .pipe(named())
    .pipe(webpack({
      devtool: 'source-map'
    }))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(through.obj(function (file, enc, cb) {
      // Dont pipe through any source map files as it will be handled
      // by gulp-sourcemaps
      var isSourceMap = /\.map$/.test(file.path);
      if (!isSourceMap) this.push(file);
      cb();
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/'));
});

Most likelly sourcemaps.init tried to load .map file which was not yet writen on disk, plus it don't get if from pipe, as result - writen map file content is default (just copy of existing js file with no mapping info).

Workarond: do not use pipes - in that case it work as supposed:

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var through = require('through2');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sub', function() {
    return gulp.src(['src/app.js', 'test/test.js'])
    .pipe(named())
    .pipe(webpack({
       devtool: 'source-map'
    }))
    .pipe(gulp.dest('temp/'));
})
gulp.task('default', ['sub'], function() {
  return gulp.src(['temp/app.js']) //<-- NOTE: we use app.js AND its app.map produces from 'sub' task
    .pipe(sourcemaps.init({loadMaps: true}))
     //empty, uglify or any other processors
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/'));
});

[gregorskii]

+1 I am noticing a similar issue I think. The source maps do work in the browser but they only contain sources for the bundle entry file. In my case main.js, not any of the required/sourced files.

[Andrfas]

In my case source maps are ready before the gulp task is running, so those files are already on disk when task is running. I was digging in for a quite long time and found what caused problem in my situation - I had multiple //# sourceMappingURL= in my source file.