缩小后对原始源的 gulp 引用答案

【问题标题】：gulp reference to original source after minification缩小后对原始源的 gulp 引用
【发布时间】：2023-04-09 01:11:01
【问题描述】：

一旦放大完成，假设我有一些错误，

我希望浏览器的控制台将我指向原始源，这样我就可以清楚地看到问题，而不是缩小代码行。

Script.js + 更多文件（连接加缩小）

   var somevar = 4
   console.log(someVar) //misspelled var name

控制台会带我到这个文件

script.min.js

var somevar=4;console.log(someVar)

我见过一些.map 文件和一些js 库，不知道它们是如何工作的。

有人可以建议浏览器的控制台如何在缩小文件中出现错误/问题的情况下引用原始源代码。

gulp.task("app", function() {
    var app = [
        "js/libs/abc.js",
        "js/file1.js",
        "js/file2.js"
    ];

    gulp.src(app)
        .pipe(concat("app.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("js"))
});

【问题讨论】：

您使用哪个工具进行缩小？该工具还必须创建一个源映射，内联或作为额外文件。有关源地图的更多信息：html5rocks.com/en/tutorials/developertools/sourcemaps
我正在使用gulp，但不知道如何生成.map文件
Gulp 不是缩小器。它只是一个注册任务和流文件的系统。看来您正在使用 uglify。见lisperator.net/uglifyjs/codegen

标签： javascript gulp minify

【解决方案1】：

将此安装到您的开发依赖项 https://www.npmjs.com/package/gulp-sourcemaps

gulp.src(app)
        .pipe(concat("app.min.js"))
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest("js"))

确保生成的 JavaScript 文件 example.js 末尾有源映射 url，如下所示：

//# sourceMappingURL=example.js.map

【讨论】：