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

时间:2014-11-12 18:37:08

标签: gulp gulp-uglify

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

我的代码如下。

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

1 个答案:

答案 0 :(得分:1)

根据gulp-uglifyjs documentation

  
      
  • outSourceMap

         

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

         

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

  •   
     

[...]

     
      
  • sourceRoot

         

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

  •   

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

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

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

  3. 以下示例假设您在http://localhost:3000运行了一个网络服务器,并且您的网络服务器根位于目录" src"紧接在包含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