Wrong file and sources properties are generated on external sourcefiles

When writing external sourcemaps, the file and path properties are currently set incorrectly in the sourcemap.

According to the spec, all non-absolute URLs inside the sourcemap have to be relative to the location of the sourcemap itself (see https://github.com/mishoo/UglifyJS2/issues/700).

Currently, in this example…

gulp.src('app/src/**/*.less')
    .pipe(gulp.dest('.tmp/src/'))
    .pipe(sourcemaps.init())
      .pipe(less())
    .pipe(sourcemaps.write('.', { includeContent: false }))
    .pipe(gulp.dest('.tmp/src/'));

…for a file located in app/src/components/main/main.less, you would expect the following end result inside the .tmp folder (note that we copy the less file in the second line):

.tmp/
  └ src/
     └ components/
           └ main/
               ├ main.css
               ├ main.css.map
               └ main.less

Which should have "sources": ["main.less"] and "file":"main.css" set in that sourcemap file. Instead, the paths in those properties are set relative to the path passed to write as its first argument (in this case '.') that is "sources": ["components/main/main.less"] and "file":"components/main/main.css".

There are currently two pull requests by @sixinli that try to fix this issue. One is floridoo/gulp-sourcemaps/pull/157 which fixes how the file property is set. The other is floridoo/gulp-sourcemaps/pull/156 which does the same for the sources property.

In the second pull request there is the complication that, to be able to calculate the relative path to the original source file, we need to know the destination folder. In the example shown the less file is in the same folder than the sourcemap, but if I had not copied it, we would need to know that the destination folder is .tmp/src/ (set in the last line) at the time of calling .pipe(sourcemaps.write('.', { includeContent: false })), to be able to construct the necessary path ../../../../ etc..

As we only know that path at the end of the pipe, @sixinli’s fix includes an option that you have to the pugin to set what’s the final path, like this:

      .pipe(sourcemaps.write('.', {
        includeContent: false,
        relativeToSourcePath: 'dist/build'
      }))

There is a small error that I have noticed in the second pull request about how the path is formed. I’m going to send @sixinli a patch for it, but apart from that both of them solve the issue.

[phated]

@Emigre thanks for reviewing and the in-depth explanation! Glad this has been fixed.

[Emigre]

@nmccready I have tried version 2.6.0 and it seems to fix this issue, so I’m going to close this.

To recapitulate, now in 2.6.0 instead of using the relativeToSourcePath option you are supposed to use the destPath option. In the project that I’ve used to test this, this option creates the following map file:

{"version":3,"sources":["components/main/main-controller.less"],"names":[],"mappings":"AAEA;EACE,gBAAA;;AADF,cAEE;EACE,cAAA;EACA,kBAAA;;AAJJ,cAME,KAAI;EACF,eAAA;EACA,cAAA","file":"main-controller.css","sourceRoot":"../.."}

In this particular case the less file has been built in components/main, next to the map file and the css file. The sourceRoot option now points to the right location (../..) for the path to the source (components/main/) to reference the original file main-controller.less, which is what is expected and solves the bug. I’m not sure who has fixed the issue but thank you so much for your contribution and the effort put in the plugin. 👍 😃