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链接，它将打开Sources并突出显示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进行缩小。

Gulp-Sourcemaps：Chrome DevTools错误地引用了已编译js的源代码

1 个答案: