javascript - 我如何在 gulp 中使用 source maps？

Question

我如何将 source maps 与 gulp 一起使用？

...
sourcemaps  = require('gulp-sourcemaps'),
concat      = require('gulp-concat'),
uglify      = require('gulp-uglify'),
...

gulp.task('concat-all-js', function() {
    return gulp
        .src([
            'app/app.js',
            'app/**/*.js'
        ])
        .pipe(sourcemaps.init())
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/'));
});

我添加了两个文件:app.min.js 和 app.min.js.map

但是当我在我的文件 app.min.js 中输入错误时，我的源映射不起作用。

我已在我的浏览器 (Chrome) 中激活该选项，但我总是看到此错误:

ReferenceError: blabla is not defined
    at Object.formModel (http://localhost/dist/app.min.js:1:23964)

我的文件在同一个文件夹“/dist”。

我在我的 app.min.js 中看到这一行(最后一行):

//# sourceMappingURL=app.min.js.map

Answer 1

它看起来像是您的代码中的一个错误，导致 Gulp 崩溃，与 sourcemaps 本身没有任何关系。您可能只需要改进处理出现的错误的方式。尝试替换:

.pipe(uglify())

与:

.pipe(uglify(uglifyOptions).on('error', function(uglify) {
        console.error(uglify.message);
        console.error("Line "+uglify.lineNumber);
        this.emit('end');
    }))

目前，如果您的代码中存在错误，将导致 Gulp 退出。

(除非您有一些未显示的错误处理代码。)