使用gulp-uglifyjs，源映射源文件为空

Question

看起来源地图文件是空白的。

我的代码如下。

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
}())

Answer 1

根据gulp-uglifyjs documentation：

  

  

• outSourceMap

       

  （默认为false）将字符串作为源地图的名称。设置为true和[...]

       

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

  

     

[...]

     

  

• sourceRoot

       

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

  

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

1. sourceRoot，其值是您希望能够从中访问源地图的服务器的网址（例如http://localhost:3000）。

2. basePath，它应该从您的gulpfile包含目录映射到您的Web服务器根目录的相对路径。例如，如果您的网络服务器正在从目录“src”中提供内容。在您的gulpfile包含目录中，您希望使用＆＃34; / src＆＃34;的值。

以下示例假设您在http://localhost:3000运行了一个网络服务器，并且您的网络服务器根位于目录＆＃34; src＆＃34;紧接在包含gulpfile的目录中：

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

有用的参考资料：

1. https://www.npmjs.com/package/gulp-uglifyjs
2. http://lisperator.net/uglifyjs/codegen