gulpgulp-sourcemapsgulp-rename

How do I create a Gulp Task to do minification and source maps to a .min file properly


I'm trying to create a gulp task to compress and create a source map at the same time. The compression and source map creation works, but I can't seem how to figure out how to get the output names right when using the gulp-rename plugin.

To simplify: I have a source.js file in the /src folder and I want to create both the .min.js and .js.map file in the /dist folder.

Here's what I have:

gulp.task('scripts', function () {

// compressed
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./dist'));
});

This works in that it creates the following in /dist:

I've tried a ton of variations but I can't figure out how to get the map and compression to build and get the correct file names.

I also tried renaming the files in a separate step, but due to the async nature of gulp, that doesn't work reliably - sometimes it works sometimes it doesn't so that doesn't seem like an option either.

What am I missing?

I'm not married to creating the sourcemaps in just this way, but what is the proper way to do this? All the examples I've seen seem to do what I do above, except they don't rename the output file to min.js which seems like an important part of the process.


Solution

  • I would suggest using gulp-filter to remove the .map files from the pipeline during the rename.

    var jsFilter = require('gulp-filter')([ '*.js', ], { restore: true, });
    gulp.src(['src/*.js'])
        .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
        .pipe(uglify())        
        .pipe(sourcemaps.write('./', {
            sourceMappingURL: function(file) {
                return file.relative + '.map';
            }
        }))
        .pipe(jsFilter)
        .pipe(rename({ suffix: '.min' }))
        .pipe(jsFilter.restore)
        .pipe(gulp.dest('./dist'));
    

    That said, our workflow does the rename before the sourcemaps and it generates the maps correctly.

    gulp.src(['src/*.js'])
        .pipe(sourcemaps.init())        
        .pipe(uglify())        
        .pipe(rename({ suffix: '.min', }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));