gulp 参考缩小后的原始来源

Question

放大完成后，假设我遇到了一些错误，

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

Script.js + 更多文件（串联加缩小）

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

控制台将带我到这个文件

script.min.js

var somevar=4;console.log(someVar)

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

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

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"))
});

Answer 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

gulp 参考缩小后的原始来源

gulp reference to original source after minification

javascript

gulp

minify