Keep source maps when saving files in a different folder with Gulp

Question

I'm trying to make a Gulp task that takes JS files, runs uglify on them, adds a .min suffix to the filename and then saves them in a destination folder that is different than the source folder. The tricky part is to keep source maps working...

gulp.task('uglify-js', function () {
    // Fetch CSS files
    return gulp.src(['assets/js/*.js', '!assets/js/*.min.js'])

        // Start source map
        .pipe(sourcemaps.init({loadMaps: true}))

        // Uglify JS
        .pipe(uglify())

        // Add file suffix
        .pipe(rename({suffix: '.min'}))

        // Save source map
        .pipe(sourcemaps.write())

        // Save output to destination folder
        .pipe(gulp.dest('public/js/'));
});

I tried many different options, but the source maps don't seem to work... Does anyone know the right way to do this?

My packages:

"devDependencies": {
  "gulp": "^3.8.10",
  "gulp-rename": "^1.2.0",
  "gulp-sourcemaps": "^1.3.0",
  "gulp-uglify": "^1.0.2"
}

Thanks a bunch! :)

Answer 1

The problem is gulp-rename doesn't currently support gulp-sourcemaps, as mentioned in their latest issue.

One alternative is to use a different lib that supports sourcemaps, for example gulp-concat, which supports renaming the files. If you don't want to concat your files, however, you could always open a pull request against gulp-rename to add sourcemaps support, as documented here.

Update: As of 2015-03-14 gulp-rename now supports sourcemaps