问题标签 [gulp-sourcemaps]

这是任务：

基本上，这会产生一个有时映射不正确的源映射。我测试的方式是在chrome中加载它，打开开发工具并尝试添加断点。这是一个例子：

资源：

建成：

您可以看到两者几乎相同。不过，我不能在行上放置断点：

当我这样做时（将断点放置在源文件或构建文件中），我被重定向到它下面的行（function phoneNumberFilter(number) {）。

这些奇怪的重定向几乎在每个文件中都会出现，我似乎找不到任何押韵或理由。有时他们有时会将一行重定向到作用域函数的末尾...idk。

提前致谢。

gulp-usemin 正在生成并将 css sourcemap 链接标记附加到输出 html，但不适用于 js。如何阻止它附加 sourcemap 标签？

吞咽任务：

源 HTML：

这是结果输出。请注意额外的 sourcemap css 链接标签，但 JS 地图没有相应的 sourcemap 脚本标签。为什么会这样，如何停止为 css 插入 sourcemap 标签？

嗨这个问题难倒我。

我想知道，在从 TS 编译并使用 Browserify 之后，我是否可以让我的 SourceMaps（来自 gulp-sourcemaps）一直指向我的 TS 文件。

目前我让它工作，所以我使用 tsify 来编译 TS，然后我将它全部捆绑到一个 all.js 中，然后将它 uglify（缩小）到一个 all.min.js 中。我也有 SourceMaps，但只是从缩小版本映射到 all.js。

我已经为此搜索了很多。我之前也做过 SourceMaps，从 JS 缩小到我的 TS，但在那种情况下我没有使用 Browserify。

我当前的 Gulp 任务：

请注意，这里的一个大问题是 sourcemaps 调用之间的所有内容都需要支持 gulp-sourcemaps，而 Browserify 不支持。Gulp 也有一个 Typescript 编译器，但是我将如何使用 Browserify？

谢谢！

我有一个在 VSCode 中开发的 Angular2/typescript 应用程序。我使用 Gulp 来构建打字稿文件和 gulp-sourcemap 来创建地图文件。在对 VSCode 的 chrome 调试扩展进行一些修补后，附加/启动 chrome 效果很好，但我无法获得断点。我用“dnx web”运行网站，但我认为这无关紧要。

我的文件夹结构是这样的：

我的launch.json样子是这样的：

我的 gulp 构建任务如下所示：

我已验证生成地图文件并将其存储在与 js 文件相同的文件夹中。建设时。

感谢您的任何提示。

我似乎无法让我的源地图在 Chrome 中为我缩小的 CSS 文件工作。这是我的 gulpfile.js：

当我运行它时，会创建源映射（并且它引用原始源{...,"sources":["main.c.src.css"],...）。但是，当在 Chrome 中打开引用缩小的 CSS 文件 (main.c.min.css) 的 HTML 页面时，我看不到原始源文件 (main.c.src.css) 的行号。

我怎样才能解决这个问题？

我正在使用gulp-typescript并gulp-sourcemaps使用源映射编译 TypeScript。我想.js将源映射文件和源映射文件都输出到与原始文件相同的目录.ts。

我正在使用一个tsconfig.json文件来配置 TypeScript，并且我正在使用它typings来管理 TypeScript 定义文件。我自己的所有代码都在js目录中。这是我的项目结构：

现在我想出现在目录中，并出现app.js在. 另外，在 Chrome 中调试时，我想在“源”选项卡中保持相同的文件夹结构。jssomeScript.jsjs/subdir

我为此配置了以下 gulp 任务：

这有效地输出.js了正确目录中的文件。但是，在 Chrome 中运行它并打开开发工具时，这些.ts文件位于根目录下的“源”目录中，这意味着源映射文件包含不正确的根目录。

应该更改什么以显示同一位置的.ts文件和文件？.js

注意：这个问题类似于这个问题，除了我想使用tsconfig.json，因此不能使用gulp.src或其base属性。

我使用带有 gulp-sourcemaps 的 gulp-less 编译器编写源映射文件。

但它在我的 chrome 开发工具中不起作用，我看不到 less 的内容。只有css文件。

这是我的 gulp 文件：

使用Typescript 1.8、Gulp 3.9.0、gulp-sourcemaps 1.6.0和tsconfig.json文件。

很久以前，这工作得很好。最近（我无法确定何时），Chrome 和 Firefox 都不会真正使用源映射。

我在 Chrome 上启用了 sourcemaps，并识别出有一个 sourcemap，在控制台中告诉我：

“检测到源映射。应将关联文件添加到文件树中。您可以将这些解析的源文件作为常规 JavaScript 文件进行调试。关联文件可通过文件树或 Ctrl + P 获得。”

但是，源文件不能通过任何一种方法获得。

在本地构建上构建文件结构（仅以登录为例）：

但是，Chrome 仅在文件树中显示：

而已。没有 Typescript 文件夹，没有文件。Ctrl-P 也找不到它们。所以我在调试的时候只能调试编译好的app.js文件，看不到Typescript代码。

我的 gulp 文件相关部分：

我查看了类似情况的各种文档和解决方案，但我仍然没有让 Chrome 使用源映射。

https://www.npmjs.com/package/gulp-sourcemaps

https://github.com/ivogabe/gulp-typescript/issues/201

https://github.com/floridoo/gulp-sourcemaps/issues/89#issuecomment-73184103

gulp-typescript：使用 createProject 的问题......“还有更多！”

不知道为什么这不能正常工作。任何见解，堆垛机？

我一直在努力让 gulp sass 和 gulp sourcemaps 完全按照我的意愿去做，但我发现很难。我想获取一个 sass 入口文件 (src/sass/index.scss)，生成一个输出文件 (dist/css/index.css) 和该索引文件的单独源映射 (dist/css/index.css.map)将 sourceRoot 设置为项目基础（绝对路径：/home/damon/projects/test），并且源映射条目与该路径相关。

这是我尝试过的：

尝试 1：来自 gulp-sass 的直接示例代码：

结果：这将源映射内联到 CSS 文件中，所以我无法判断它是否正确。

尝试2：将其写入单独的文件

结果：写了一个单独的sourcemap，但是sourceRoot说'/sources/'（WTF是那个？！，它不存在，我从来没有配置过）并且路径都是相对于sass入口文件，而不是项目基础，当我的浏览器尝试定位源文件时，这也将毫无意义。

尝试3：尝试修复sourceroot（我也发现includeContent：false）

结果：sourceroot现在是我的工作文件夹，很好，内容不包含很好，但是sourcemap中的文件仍然相对于sass入口文件而不是sourceRoot，所以我的地图仍然没用

尝试 4：设置 gulp.src 基础

结果：令人生气的是，在 gulp.src 上设置基础修复了 sourcemap - sourceRoot 仍然正确，并且源文件路径相对于 sourceRoot，但它现在输出到 dist/css/src/sass/index.css 这是错误的。哇！

尝试 5：使用绝对路径

结果：没有变化，它仍然输出到 dist 中相同的深层结构。

如果有人能启发我如何做到这一点，我将永远感激不尽。

我最近开始使用Gulp它，因为我更喜欢语法Grunt，虽然我喜欢它的大部分时间，但我在使用Chrome或任何浏览器时注意到它在查看检查器时告诉我不正确的行映射。

它总是告诉我正确的文件，但是它错误地告诉我它所在的行。

Sass 我发现嵌套似乎有问题；因为它给我的行号是第一个父级开始的行，例如在下面的代码中：

如果我试图检查具有bar该类的元素，它会告诉我它在线1而不是3.

这是我的gulpfile.js文件：