Gulp - 源映射未在 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']);

Answer 1

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

}

Answer 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