CODEWITHSUNDEEP
gulpsource-mapsgulp-uglify
user3448990
user3448990

Reputation: 333

Gulp - sourcemaps aren't loading source in Chrome

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']);

Upvotes: 0

Views: 2529

Answers (2)

simply good
simply good

Reputation: 1103

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("."));

}

Upvotes: 1

SteveLacy
SteveLacy

Reputation: 4166

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

Upvotes: 2

Related Questions