Gulp - sourcemaps aren't loading source in Chrome

Question

I haven't tested all browses but I use chrome regularly.

With Grunt I had no problem with uglify and the map file produced. In Chrome, when in the developer tools, both the min.js and the original .js are loaded.

I'm trying to learn Gulp and after hours of trying I cannot get the map file to link the original .js to match the .min.js.

Here is my gulpfile.js. What am I doing wrong?

var gulp = require('gulp')
    , uglify = require('gulp-uglify')
    , rename = require('gulp-rename')
    , sourcemaps = require('gulp-sourcemaps');

// default means this task will run whenever you type “gulp” at the command line without any parameters.
gulp.task('uglify:apps', function () {

    gulp.src(['core/apps/**/*.js', '!/**/*.min.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(rename({ extname: ".min.js" }))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest('core/apps/'))
    ;

});


gulp.task('default', ['uglify:apps']);

score 2 · Accepted Answer · answered Jan 15 '15 at 17:28

2

gulp-uglify as of Jan 15 2014 does not have working sourcemaps built in.

This is the current solution for getting sourcemaps to work:

npm install gulp-uglify@https://github.com/floridoo/gulp-uglify/tarball/sourcemap_fix --save-dev

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');


gulp.task('ug', function(){
  gulp.src('./test.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./out'));
});

gulp.task('default', ['ug']);

Example repo: https://github.com/stevelacy/gulp-test-sourcemaps

answered Jan 15 '15 at 17:28

SteveLacy

4,150
2
23
30

Thank you for jumping on this quickly and posting a repo. I'll try out the solution. Do you think gulp-uglify will fix this? It seems like a glaring mistake. – user3448990 Jan 15 '15 at 21:47
1

@user3448990, Yes, there is a pull request from floridoo right now. I have poked on the issue to get some motion. – SteveLacy Jan 16 '15 at 02:11
2

@user3448990 install 1.1.0, he merged the changes. issue fixed – SteveLacy Jan 19 '15 at 03:13

simply good · Answer 2 · 2020-01-13T21:10:08.337

In my case I updated gulp-uglify and gulp-sourcemaps to: "gulp-sourcemaps": "2.6.5", "gulp-uglify": "3.0.2",

And I changed a little minification function from:

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../' }))

to:

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '.' }))

for some reason when sourceRoot: '../' I cant see sources in browser (but debugger; and breakpoints were stopping the execution, I just didnt see the code)

My whole code right now

function minifyJs(src, dest) {
var minifyPaths = [src];
return gulp.src(minifyPaths)
.pipe(domSrc.duplex({ selector: 'script[data-concat!="false"]', attribute: 'src', cwd: '../' })) //dont pay attantion here
.pipe(sourcemaps.init())
.pipe(babel({
    presets: ["es2015-script"],
    compact: false
}))
.pipe(concat(dest))
.pipe(gulp.dest("."))
.pipe(uglify({
    compress: {
        unused: false
    }
}))
.pipe(rename({ extname: '.min.js' }))
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '.' }))
.pipe(gulp.dest("."));

}

Gulp - sourcemaps aren't loading source in Chrome

2 Answers2