Sourcemap 源文件使用 gulp-uglifyjs 为空答案

【问题标题】：Sourcemap source files are empty using gulp-uglifyjsSourcemap 源文件使用 gulp-uglifyjs 为空
【发布时间】：2014-11-12 18:37:07
【问题描述】：

看起来源映射文件是空白的。

我的代码如下。

gulp.src(sources)
    .pipe(uglifyjs('app.min.js', {
        outSourceMap: true
    }))
    .pipe(gulp.dest('public/js'))
    .pipe(notify({message: 'Scripts task complete'}));

在浏览器中我的图像看起来像这样

注意源文件是空白的。不知道我在这里做错了什么。你能帮忙吗？

我会补充一点，我的源文件正在使用模块模式，即

(function () {
"use strict";
//my code in here
}())

【问题讨论】：

你能解决这个问题吗？

标签： gulp gulp-uglify

【解决方案1】：

根据gulp-uglifyjs documentation：

outSourceMap

(默认 false) 给出一个字符串作为源映射的名称。设置为 true 和 [...]

注意：如果您希望源地图指向相对路径而不是绝对路径（如果它托管在服务器上，您可能会这样做），请将 basePath 选项设置为内容的基础已送达。

[...]

源根

设置应该找到源文件的根位置

考虑到上述情况，您可能需要在 gulpfile 中为 gulp-uglifyjs 调用添加两个选项：

sourceRoot，其值是您希望能够从中访问源映射的服务器的 url（例如http://localhost:3000）。
basePath，它应该从你的 gulpfile 的包含目录映射到你的网络服务器根目录的相对路径。例如，如果您的网络服务器正在为您的 gulpfile 包含目录中的目录 'src' 提供内容，则您可能希望使用值“/src”。

以下示例假设您在 http://localhost:3000 运行网络服务器，并且您的网络服务器根目录位于包含 gulpfile 的目录中的“src”目录中：

gulp.src(sources)
.pipe(uglifyjs('app.min.js', {
    outSourceMap: true,
    basePath: "/src",
    sourceRoot: "http://localhost:3000"
}))
.pipe(gulp.dest('public/js'))
.pipe(notify({message: 'Scripts task complete'}));

有用的参考资料：

【讨论】：