简体   繁体   English

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

[英]Gulp-Sourcemaps: Chrome DevTools incorrectly references source of compiled js

Example case: 示例案例:

I have 3 javascript files (Act.js, Body.js, SpriteSheets.js) that are being compiled together with gulp 4.0 and source mapped with gulp-sourcemaps 2.6.4. 我有3个JavaScript文件(Act.js,Body.js,SpriteSheets.js)正在与gulp 4.0一起编译,并用gulp-sourcemaps 2.6.4映射了源代码。 An error is thrown on line 43 of Body.js, but the console says line 194 of Act.js. Body.js的第43行引发错误,但控制台显示Act.js的第194行。 Act.js has 151 lines, so if I click the Act.js:194 link in the Console it opens up Sources and highlights the last line (151) in Act.js. Act.js有151行,因此,如果我在控制台中单击Act.js:194链接,它将打开Sources并突出显示Act.js中的最后一行(151)。

All 3 javascript sources display correctly in the Sources tab and the console prints the correct class and function names, but the console always points to Act.js, even console logs that exist in the other files. 所有3个javascript源均会在“源”选项卡中正确显示,并且控制台会打印正确的类和函数名称,但控制台始终指向Act.js,即使其他文件中存在控制台日志也是如此。

I don't know if this is a Chrome issue, a gulp-sourcemaps issue, or a problem with my code. 我不知道这是Chrome问题,gulp-sourcemaps问题还是我的代码问题。 Any ideas? 有任何想法吗?

Gulp Compile Function: 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));
};

I should note that SASS is also being compiled and sourced mapped and the sourcemap works correctly. 我应该注意,SASS也正在被编译和源映射,并且sourcemap可以正常工作。

Looks like gulp-minify was the problem. 看起来问题很大。 It's an unsupported plug-in when it comes to using gulp-sourcemaps. 当使用gulp-sourcemaps时,它是不受支持的插件。 Whoops! 哎呀! I should have read the documentation thoroughly. 我应该已经仔细阅读了文档。 I switch to using gulp-uglify-es for minification. 我改用gulp-uglify-es进行缩小。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM