Question

我正在开发AngularJS应用程序并使用gulp进行构建过程。我有多个JavaScript文件（用于控制器，服务，指令等），我将其连接，uglify然后内联到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));

请参阅here了解整个解决方案，例如对于项目结构等，即使我认为这与我的问题没有任何关系。

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

更新I（13.10.2015）

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

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

但由于gulp-inline中的issue，这似乎无效。似乎有一个pull request，不知道什么时候会被合并回来。即使它可行，我也不确定在这种情况下源图将会发生什么......？

更新II（19.10.2015）

0.1.0的版本gulp-inline已于今天发布（请参阅“Update 1”中提到的pull请求，现已合并回来）。它现在可以与gulp-uglify一起正常工作，即错误已得到修复。我仍然无法让源图工作。不确定gulp-inline是否支持此功能。

所以目前我还在寻找解决方案..

gulp：concat，uglify和内联JavaScript - 源图无效

0 个答案: