问题标签 [gulp-sourcemaps]

我有以下用于捆绑 javascript 的 gulp 任务：

当我在 Chrome 开发工具中运行它时，会找到源映射并且断点工作，但变量 can't be debugged 。

以这个角度代码块为例：

如果我添加一个断点来查看 的值$animateProvider，我会得到以下信息：

但是如果我在 Uglify 中关闭变量修饰：

然后它工作：

因此，在 Uglify 破坏名称后，gulp-sourcemaps 插件似乎无法跟进变量。

其他人可以遇到同样的问题和/或知道解决方案吗？

我今天跑npm update了，随之而来的是一场灾难。我在安装软件包时遇到了麻烦，但在一切似乎都在正确的位置之后，我开始了gulp将我的 SCSS 代码编译成 CSS 的任务。

此代码重现了我的问题：

通过 运行这段代码后gulp default，结果如下：

www/sass/example.scss

www/css/example.css

www/css/example.css.map

sources生成的源映射中的数组包含"../../stdin/"而不是"example.scss"！但为什么？

I have an scss source file named style.scss which resides within /style:

And another scss source file named reset.scss which resides within /style:

These are compiled by sass with a source map in to style.min.css which resides within /style:

This is the resulting map file, style.min.css.map which resides in /style:

I am using gulp to invoke sass. Here is the relevant configuration:

WebStorm 11.0.1 seems to understand this perfectly.

Chrome DevTools fails to understand the mapping correctly. It is clearly trying; but all mappings point to reset.scss in various locations rather than the correct file and location. If I manually combine both files by replacing the @import with the actual content of reset.scss, the mappings work correctly in chrome, pointing to the correct location within style.scss.

Any idea what could be going on here?

EDIT: Microsoft Edge (the new IE in Windows 10) understands the mappings correctly within its in-browser dev tools.

EDIT 2: Firefox is experiencing the same issue as Chrome in exactly the same way.

EDIT 3: I Added another scss source file, test.scss:

I then imported this in to the style.scss file which now looks like this:

Chrome seems to understand that there are multiple source files, but the mapped locations aren't correct, and style.scss is never pointed to.

Again, Edge and Webstorm work perfectly. Chrome and Firefox have the same issue.

这是任务：

问题是源映射如下所示：

这不是我所期望的。我想要类似于 bootstrap 的东西，在 chrome 开发人员中，样式被映射回其原始的 less 源。我的源映射只是映射回标准输入，我认为这是 sass 管道的结果。我认为 gulp-sourcemaps 只是为最后一次操作创建地图......

我在缩小期间为 javascript 文件生成源映射。使用地图文件旁边的缩小 JS 文件中的相对 URL 引用地图文件。这是末尾的示例注释app-e47a6637.js：

源地图分辨率在 Firefox 中按预期工作。但是，Chrome 不会加载地图文件。

附加信息：

• JS 源映射当然是在设置中启用的。
• 我尝试在 Chrome 和服务器之间放置一个代理。Chrome 甚至不请求地图文件。
• 我gulp-sourcemaps用来生成地图文件。
• 我不想使用 Chrome 的工作区功能。我只希望它显示原始源文件。

如何在 Chrome 中启用源地图？

通过我目前正在开发的应用程序，我也在学习 Gulp 并使用源映射。该应用程序是 Typescript 和 Javascript 的混合体。这些文件被连接并缩小。传递文件gulp-uglify时发生错误：

这只发生在使用gulp-sourcemaps. 当我删除管道中的源映射生成调用时，问题不会发生，但是我也没有任何源映射。

知道打字稿可能有用，./js/ts/而 javascript 位于./js/App.

I have a typescript file users.ts in a sub-directory routes.

The gulp code in gulpfile.js:

The sourcemap generated by gulp-sourcemaps does not work with VSCode :

The sourcemap generated by tsc works fine in VSCode:

and the VSCode breakpoint works fine with the sourcemap generated by tsc.

So how to config gulp-typescript/gulp-sourcemaps to generate the same sourcemap as tsc?

我使用 gulp-sass、gulp-sourcemaps、browsersync 并且我的项目具有用于 sass 样式表的硬文件夹结构。现在任务看起来像这样：

但我认为这项任务可能更简单。谢谢你。

我正在尝试创建一个 gulp 任务来同时压缩和创建源映射。压缩和源映射创建工作，但我似乎无法弄清楚如何在使用gulp-rename插件时正确获取输出名称。

为了简化：我在文件夹中有一个source.js文件/src，我想在文件夹中创建.min.js和.js.map文件/dist。

这是我所拥有的：

这样做的原因是它在中创建以下内容/dist：

• jquery-resizable.min.js（一切都好 - 压缩，地图参考和正确的名称）
• jquery-resizable.js.min.map （地图在那里，但名字不好 - 应该是 jquery-resizable.js.map）

我尝试了很多变化，但我不知道如何获取地图和压缩来构建和获取正确的文件名。

我还尝试在单独的步骤中重命名文件，但由于 gulp 的异步性质，它不能可靠地工作 - 有时它可以工作，有时它不能，所以这似乎也不是一个选项。

我错过了什么？

我不喜欢以这种方式创建源地图，但是这样做的正确方法是什么？我见过的所有示例似乎都在执行我上面所做的操作，只是它们没有将输出文件重命名为 min.js，这似乎是该过程的重要部分。

在我当前的工作流程中，我需要创建 browserify 包，但还希望将非 commonjs js 库连接到文件的开头以公开全局变量，同时减少 http 请求的数量和 js 文件的大小。（其他包也可能需要其中一些库）

我目前有一个 gulp 任务，它创建 browserify 包并将任何所需的库连接到输出文件的开头，但是我发现在合并流时，我的源映射正在中断，并且在 web 检查器中；生成的地图仅显示预丑化的 browserify 包，而不是单个 js 模块。

（请注意，如果存在多个捆绑包，我的任务还读取配置 json 数组以构建多个捆绑包）

有没有办法可以保留预合并流中的源映射？loadmaps 设置为 true 似乎不起作用。

另外，作为一个健全的检查，我的方法会被认为是明智的吗？我是否错过了一些非常简单的方法来实现我想要的结果？