javascript - Gulp-Sourcemaps:Chrome DevTools 错误地引用了已编译 js 的源

Question

示例:

我有 3 个 javascript 文件(Act.js、Body.js、SpriteSheets.js)，它们与 gulp 4.0 一起编译，并使用 gulp-sourcemaps 2.6.4 进行源映射。 Body.js 的第 43 行抛出错误，但控制台显示 Act.js 的第 194 行。 Act.js 有 151 行，因此如果我单击控制台中的 Act.js:194 链接，它将打开源并突出显示 Act.js 中的最后一行 (151)。

所有 3 个 javascript 源都在“源”选项卡中正确显示，并且控制台打印正确的类和函数名称，但控制台始终指向 Act.js，甚至其他文件中存在的控制台日志也是如此。

我不知道这是 Chrome 问题、gulp-sourcemaps 问题还是我的代码问题。有什么想法吗？

Gulp 编译函数:

const gulp = require('gulp');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const plumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
....

const compileJS = (src, dest, name, include) => {
    console.log(`js compile ${src}`);
    let glob = [src];
    if (include){
        glob = include.first ? include.src.concat(glob) : glob.concat(include.src);
    }
    return gulp.src(glob)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        // concat all js in folder and name result as folder's name
        .pipe(concat(name + '.js'))
        .pipe(minify({
            noSource: true,
            ext: {
                min: '.min.js'
            }
        }))
        .pipe(sourcemaps.write('./', {
            sourceMappingURLPrefix: src.replace('./', '').replace('src', '').replace('/**', '').replace('/*.js', '')
        }))
        .pipe(gulp.dest(dest));
};

我应该注意到，SASS 也正在被编译和源映射，并且源映射可以正常工作。

Answer 1

看起来 gulp-minify 是问题所在。在使用 gulp-sourcemaps 时，这是一个不受支持的插件。哎呀!我应该仔细阅读文档。我改用 gulp-uglify-es 进行缩小。