CODEWITHSUNDEEP
buildgulpsource-mapsgulp-sourcemapsgulp-minify
stevendesu
stevendesu

Reputation: 16771

How Gulp + sourcemaps work for debugging

So I just got set up with Gulp yesterday and after a rocky start I'm well on my way to automating build processes, but I decided to try and do something a teensy bit trickier and suddenly hit another wall.

My desired output is to have a minified javascript file which I can serve to the browser and, upon inspecting in Chrome or Firefox, see the original source code. Pretty simple, right?

I currently have the following in my gulpfile:

gulp.task('minify', function() {
    gulp.src('./sources/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(minify({
        ext:{
            src:'.js',
            min:'.min.js'
        }
    }))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('./www/js'));
});

This successfully generates the sourcemaps in ./www/js/maps/ and it puts the following at the bottom of the uncompressed files:

//# sourceMappingURL=maps/<whatever>.js.map

However it does not append such a comment to the bottom of the compressed files. As such when I open these files in a browser it's unable to show me the original source.

What am I doing wrong?

Upvotes: 0

Views: 571

Answers (1)

Roman Edirisinghe
Roman Edirisinghe

Reputation: 216

You can try this:

gulp.task('minify', function() {
    gulp.src('./sources/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(minify({
        ext:{
            src:'.js',
            min:'.min.js'
        }
    }))
    .pipe(sourcemaps.write('maps', {
      addComment: true
    }))
    .pipe(gulp.dest('./www/js'));
});

Upvotes: 0

Related Questions