I am using Gulp to uglify javascript files and generate their source map. So far so good:

```
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

gulp.task('compress-js', ['clean-js'], function() {
  return gulp.src('./resources/js/**/*.js')
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.uglify())
    .pipe(plugins.rename({extname: '.min.js'}))
    .pipe(plugins.sourcemaps.write('./maps'))
    .pipe(gulp.dest('./public/js'))
    .pipe(plugins.livereload());
});

```

This code generates the following output folders and files, which are correctly loaded by the browser:

**public/js/someScript.min.js**

```
function doSomeStuff(){console.log("This stuff function simply says: hello!!")
//# sourceMappingURL=maps/someScript.min.js.map

```

**public/js/maps/someScript.min.js.map**: Notice this file is referenced in the line above.

However I would also like to gzip them so my updated gulpfile.js is:

```
gulp.task('compress-js', ['clean-js'], function() {
  return gulp.src('./resources/js/**/*.js')
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.uglify())
    .pipe(plugins.rename({extname: '.min.js'}))
    .pipe(plugins.sourcemaps.write('./maps'))
    .pipe(plugins.gzip())
    .pipe(gulp.dest('./public/js'))
    .pipe(plugins.livereload());
});

```

Now I get these files:

**public/js/someScript.min.js.gz**

```
function doSomeStuff(){console.log("This stuff function simply says: hello!!")}
//# sourceMappingURL=maps/someScript.min.js.map

```

**public/js/maps/someScript.min.js.map.gz**

The source map is not being linked because, the js.gz file references **someScript.min.js.map** instead of **someScript.min.js.map.gz**. What am I missing? How can I make the file reference the correct extension?