2

我正在开发一个 AngularJS 应用程序并使用 gulp 进行构建过程。我有多个 JavaScript 文件（用于控制器、服务、指令等），我将它们连接、丑化然后内联到一个index.html中，以最大限度地减少服务器连接的数量。

问题来了：

  • 当我不将连接和丑化的 JavaScript 文件内联到index.html中时，源映射在我使用开发人员工具调试应用程序时工作。
  • 当我将JavaScript 文件内联到index.html中时，我的断点永远不会被命中。为什么？我不确定，我做错了什么。

这是我的gulpfile的相关部分：

// isPublish is set to true to uglify.
// the temp-folders are here just for testing purposes, I tried with
// and without and I have also changed the order of the gulp-command.
return gulp.src(definition.srcs)
           .pipe(sourcemaps.init())
           .pipe(replace("$build:serverApiBaseUrl$", args.serverApiBaseUrl || "..."))
           .pipe(gulp.dest(targetFolder + "/temp1"))
           .pipe(concat(definition.targetFile))
           .pipe(gulp.dest(targetFolder + "/temp2"))
           .pipe(gulpif(isPublish, uglify()))
           .pipe(sourcemaps.write("./"))
           .pipe(gulp.dest(targetFolder));

请在此处查看整个解决方案，例如项目结构等。尽管我认为这与我的问题没有任何关系。

我意识到的另一件事是，即使断点被命中（当不使用“内联”模式时），变量名仍然是错误的格式（即只有字母）。这是预期的浏览器行为（即开发人员工具不支持吗？），还是我需要为sourcemaps-command 指定一些特殊的东西？我不明白为什么，因为生成的源地图包含 -names信息。

更新一 (13.10.2015)

我意识到我也可以使用以下方法：

return gulp.src(paths.target + "index.html")
           .pipe(inline({
                base: paths.target,
                js: uglify()
           }))
          .pipe(gulp.dest(paths.target));

然而，由于gulp-inline. 似乎有一个拉取请求，但不知道它什么时候会合并回来。即使它会起作用，我不确定在这种情况下源映射会发生什么......？

更新二 (19.10.2015)

的版本0.1.0已于gulp-inline今天发布（请参阅“更新 1”中提到的拉取请求，该请求现已合并回来）。它现在可以正常工作gulp-uglify，即错误已得到修复。我仍然无法让源地图工作。不确定这是否受gulp-inline.

所以暂时，我还在寻找解决方案..

4

0 回答 0