问题标签 [gulp-sourcemaps]

我在我的项目中使用 gulp-sourcemaps 来处理我的 SASS 和 JavaScript。我的 gulpfile.js 正确生成了 .map 文件，尽管 Chrome 在开发者工具和控制台中显示了错误的文件名。目前，我不确定问题出在哪里。

我的项目树：

我的 gulpfile.js

计划是：

• 'styles' 编译 public/sass/main.sass（包括我所有的 SASS 源），自动为源添加前缀，编写源映射并输出 public/css/main.css

• 'scripts' 连接 public/js 目录中的所有文件，丑化源代码，写入源映射并输出 public/js/min/main.js

在这整个过程之后，我想留下 public/css/main.css 包含我所有编译的、自动前缀的、缩小的 SASS 源和 public/js/min/main.js 包含我所有的连接、缩小的 JavaScript 源。

目前，开发人员工具中的样式显示文件名 _box-sizing.scss（它是来自 public/sass/import/lib/neat 的依赖项），该文件不包含我正在检查的元素的样式。文件名应该是 _header.sass（来自 public/sass/import/layouts/common/_header.sass）。

同样，无论源文件如何，控制台都会显示 main.js。我有 public/js/main.js 和 public/js/test.js - 这些文件应该连接并输出到 public/js/min/main.js。这两个文件都只包含一个用于测试目的的 console.log()，并且 Chrome 中显示的文件名都是 main.js。

我希望这是有道理的。先感谢您

为我的 sass 生成源映射时，我的 gulpfile.js 出现问题。当我使用开发者工具检查一个元素时，它的来源显示为 _box-sizing.scss，而它的真正来源是 _header.sass。

这是我的 gulpfile.js 的摘录

这会在 public/css/sourcemaps 中生成一个源映射。我的 .css 文件中的 sourceMappingURL 为 /*# sourceMappingURL=sourcemaps/main.css.map */

看起来像这样

任何帮助，将不胜感激。谢谢

所以，Autoprefixer 一直在让我使用更新后的 postcss 版本，所以我正在尝试更新我的 Gulp 文件。

问题是所有的例子都没有把 Sass 作为第一步；我使用 gulp-ruby-sass。

如果我在我的 sass 目录上运行我的 sass 任务（我需要在其中处理 2 个 scss 文件），这将有效并在 dest 目录中输出 2 个 css 文件：

但我的问题是如何集成下一部分，通过 autoprefixer 传递 CSS 并生成源映射？如果我按顺序运行下一个，这会导致对象不是函数错误：

我试图将它们作为一个序列运行，但宁愿整合它们：

我只是无法将让 ruby​​-sass、autoprefixer 和 sourcemaps 一起工作的管道放在一起。

更新：

好的，即使我决定将任务分开（如下面的@patrick-kostjens 建议），当我运行 Autoprefixer 任务时，我会收到此错误：

我按照建议尝试了 autoprefixer = autoprefixer-core 。

我正在使用吞咽。

我想要一个或多个 JS 文件（比如 jQuery）将它们组合成一个，缩小它，并将其写入分发文件夹。

我就是这样做的：

功能：

我不确定的是sourcemaps.init()位置...

我应该创建多个（在我的情况下为 2 个）地图文件（如果浏览器支持那会很好）还是只创建一个（/maps/myModule.map）？

使用 Gulp，我可以使用指向原始 SASS 文件的源映射生成从 SASS 转译的 CSS，并且我还能够生成源映射来调试缩小的 CSS，但到目前为止我无法弄清楚如何（如果它是甚至可能）使用 Gulp 生成源映射，它允许您调试从 SASS 转译和缩小的 CSS，以及添加供应商前缀等。我已经设法生成了一些源映射输出，但它们最终映射回错误的行.scss 文件，当我执行编译和缩小时。

下面的代码确实会生成源映射作为浏览器获取并读取的输出，但正如我之前所说，Chrome 调试工具指向原始 .scss 文件中的错误文件/行。

这是我的 css-compile Gulp 任务。

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

问题来了：

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

这是我的gulpfile的相关部分：

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

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

更新一 (13.10.2015)

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

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

更新二 (19.10.2015)

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

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

我使用以下 gulp 任务生成了一个带有源映射的 js 文件。原始资源会在 Firefox 中加载，但不会在 Chrome 中加载。谁能指出为什么 Chrome 找不到明确包含在生成的 index-[hash].js.map 中的来源？

所以我昨天刚开始使用 Gulp，在经历了一个艰难的开始之后，我正在努力实现构建过程的自动化，但我决定尝试做一些稍微有点棘手的事情，然后突然撞到了另一面墙。

我想要的输出是有一个缩小的 javascript 文件，我可以将它提供给浏览器，并在 Chrome 或 Firefox 中检查后，查看原始源代码。很简单，对吧？

我目前在我的 gulpfile 中有以下内容：

这会成功生成源映射，./www/js/maps/并将以下内容放在未压缩文件的底部：

但是，它不会将此类注释附加到压缩文件的底部。因此，当我在浏览器中打开这些文件时，它无法显示原始来源。

我究竟做错了什么？

我有以下任务将 *.scss 文件编译为 scc，将它们缩小并连接到一个 css 文件。

是否可以将 app.min.css 中的源映射添加到 *.scss 文件？

我目前正在编写一个辅助项目，在那里我可以了解更多关于 TypeScript 和 ES6（使用 babel）的信息。

我想在我的 TypeScript 中使用 ES6，所以我选择了以下工作流程。

Typescript (ES6) -> Babel (ES6) -> ES5

现在我正在使用 Gulp 来自动化所有这些，我很难让源映射正确生成。我应该提到这种风格是由 /r/typescript 上的用户向我建议的，所以我什至不确定它是否可能。

无论如何，这是我目前的 gulp 任务

我尝试了许多不同的方法，但都没有奏效。在 VSCode 中调试时，我的应用程序的入口点：正确build/server/index.js加载并找到源文件src/server/index.ts。

但是，当 VSCode 尝试进入另一个文件时，它会说它会build/server/utils/logger/index.js寻找src/server/utils/logger/index.js它没有找到的文件，因为它应该在寻找 *.ts 文件。

那么我做错了什么？或者这甚至可能吗？我已经盯着这个大约5个小时了。所以任何见解都会很棒。

VSCode 0.9.x 也显示'.../.js' file not foundVSCode 1.0 只是默默地失败。

我的 tsconfig.json，它通过$.typescript.createProject()

.babelrc

这是相关的 npm 包

编辑： 我已经对 gulp-sourcemaps 进行了一些调查，当不使用 babel 时，sourcemaps 可以正常工作。（删除所有无关信息）

src/server/up/up2/four.ts - 没有 Babel

注意sourceMap.sources它如何列出正确的源文件up/up2/four.ts

现在这里是我将 gulp-babel 添加到任务中的示例。

src/server/up/up2/four.ts - 使用 Babel

请注意sourceMap.sources现在如何错误地显示four.js而不是打字稿文件。

奇怪的是，只要打字稿文件在根目录中，src/server它们就可以很好地构建源映射。

src/server/two.ts - 使用 Babel