问题标签 [gulp-sourcemaps]

我正在尝试让源映射与 Gulp 一起使用。我正在使用 gulp-ruby-sass 和 gulp-sourcemaps。

内联源映射被插入到 CSS 文件中，但即使我启用了源映射，它仍然无法在 Chrome 中工作。我仍然只能看到对 CSS 文件的引用，而不是 sass 文件。

这是我的 gulpfile 中的 sass 任务：

我的 CSS 文件中的内联源映射如下所示：

我将base64解码为：

这看起来对吗？我不确定它的外观，但我会认为 scss 文件名引用应该在那里？

只是无法让它工作！

我正在尝试生成源映射并缩小它，但它不起作用。

文件位置：test/test.less

输出：文件名 test/test.less

地图文件 test.css.map

压缩文件 test.min.css

当我在浏览器上加载该文件时，它不会被加载，但是当我加载 bootstrap.css.map 文件时，它会显示每个 css 或更少的文件。

我正在运行 Debian Wheezy。最近几天我在玩gulp。我的问题是，当我将浏览器直接指向文件（file:///...）时，源映射正确链接如下：

但是当我指向 localhost/... 我得到这个：

在 Iceweasel 上一切正常。我三重检查了所有设置，所以这部分没问题。我认为这可能是一些安全问题，所以我 chmod 递归地投影根，但这不是问题。

这是我的文件夹结构：

这是我的 gulpfile.js：

我得到了如下所示的 scss 文件：

索引.scss

_test.scss

当我在根文件夹上运行 gulp 命令时，我得到：

索引.css

可能是一些铬问题吗？我尝试了几乎所有我能想到的事情。它在 Iceweasel 上工作的事实让我认为这是特定的 Chromium 问题，但很难放弃。:D

我正在运行 gulp 来编译我的 sass 文件。我遇到的问题是我在检查元素时只看到一个 scss 文件。如果您需要更多信息，请告诉我。

我正在运行节点 v0.12.2 我的设置如下：

SCSS 结构

src/scss/main.scss - 导入各种部分

开发依赖

吞咽": "^3.8.11",

gulp-sass": "^1.3.3",

gulp-sourcemaps": "^1.5.2"

吞咽文件

源图

{"version":3,"sources":["includes/_buttons.scss","includes/_layout.scss","includes/_reset.scss"],"names":[],"mappings":"AAAA ,AACC,AAAY,AACZ,AAAQ,AACR,AAAO,AACP,AAAQ,AAGT,AACC,AAAY,AACZ,AAAQ,AACR,AAAO,AACP,AAAQ,ACXT,AACC,AAAY,ACDb,AACC,AAAQ,AACR,AAAS ","file":"main.css","sourcesContent":[".btn {\r\n\tbackground: #555;\r\n\tborder: 1px solid #999;\r\n\twidth: 100px;\r\n\theight: 50px;\r\n}\r\n\r\n.btn-large {\r\n\tbackground: #555;\r\n\tborder: 1px solid #999 ;\r\n\twidth: 200px;\r\n\theight: 100px;\r\n}","body {\r\n\tbackground: #333;\r\n}","* {\ r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}"],"sourceRoot":"/source/"}

我正在尝试通过库生成以下CSS Source Map文件。gulp.jsBootstrapCSS

我的 gulp 任务如下：

bower = 需要'main-bower-files' sourcemaps = 需要'gulp-sourcemaps' cssmin = 需要'gulp-minify-css' gulpFilter = 需要'gulp-filter'

在index.html我有：

但是，我bootstrap.css在 Chrome 中没有得到“原始”文件（源地图已激活）

而当我.less按如下方式为我的自定义文件执行此操作时，我得到了我原来的“styles.less”文件：

In my gulpfile.js, I'm trying to minify and enable sourcemaps in a release task.

Based on a config variable, I'm trying to pipe further actions into the stream. The check for the condition is using gulp-if-else. My set of dependencies (only relevant ones) are below

Here's the code that I'm having trouble with. If I keep three ifelse pipe calls individually (currently commented out), then the source is uglified and sourcemap is created as expected.

Repeating the condition didn't feel clean - so I tried replacing it with the minify function - and then the behavior is strange.

1. If I don't give relative path in sourcemaps.write then the js file has a inline sourcemap.
2. With a relative path, source is uglified, the js has a sourcemap comment pointing to app.js.map but app.js.map itself is never generated

I'm just picking up gulp (and node, really) and ran into this weird behavior that I can't seem to reason about. Would be a great help if someone can demystify it for me.

UPDATE: Complete gulpfile.js

UPDATE2: Added gulp-filelog. added pipe(filelog("minify")) and pipe(filelog("outer")) to the streams. filelog prints two files inside the fn but only one file outside. Why is the second file being dropped/ignored? What am I missing?

我有一个像这样的 Gulp taks：

创建 .css 文件以及源映射文件。但是源映射没有内容（“sourcesContent”：[null，null，...，null]），这应该是源映射插件默认情况下将包含内容的情况（我也明确尝试过将 includeContent 设置为 true）。

当我删除 minify 步骤时，它运行良好，我可以看到原始文件的内容，所以我检查了 minify-css 是否支持 sourcemaps 并根据插件列表它应该。

难道我做错了什么？生成源映射时，less 和 minify-css 之间是否存在任何已知的不兼容性？

我正在使用 gulp 来构建项目，并使用 gulp-sourcemaps 来生成源映射。

我有几个这样的组件：

我想将它们构建成以下结构：

目前我的 gulp 任务可以将文件生成到正确的路径中：

但是有两个问题：

1. sourceRoot地图文件不正确：期待"sourceRoot":"/src/comp1/"但结果是"sourceRoot":"/src/"

2. sourceMappingURL在压缩文件中也没有：期待sourceMappingURL=c1-a.min.js.map但结果是sourceMappingURL=../../comp1/c1-a.min.js.map

如何将**部分附加到sourceRoot并修复 sourceMappingURL？

We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:

Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:

Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.

我正在寻找与 Gulp 一起使用的插件链，它提供：

• 源地图支持
• 较少的
• 缩小
• 级联
• URL 替换（rebase）以解决重定位/连接问题

我目前拥有前四个，但我找不到现有插件的组合也可以给我最后一个（URL 变基）。我没有找到任何发出源映射的 URL 变基插件。

为了清楚起见，我的问题是，当我从项目开发文件夹中编译多个小 CSS 文件并将它们输出到一个公共文件夹中时，连接导致的移动会破坏相对 URL，例如背景图像的 URL。

编辑：

听起来我目前使用的工具链已经打算解决这个问题。所以，这表面上是答案。但是，这引发了另一个问题，即所需的语法应该如何工作。

这个问题理论上有很多重复的地方：

• clean-css #152：变基功能非常令人沮丧
• clean-css #195：rootWindows 上的选项
• clean-css #263: 如何让 relativeTo 选项在不同路径中处理 CSS 文件
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin 重新设置相对 URI？

不幸的是，没有答案能真正解释语法，他们只是演示了伏都教；所以我不知道为什么以下不起作用。如果我能解决它，我会回到这里并标记它已接受，以表明该工具链确实可以满足我的需要。

源文件：

吞咽任务：

输出，带有损坏的 URL。注意多个缺陷。尽管 CSS 相对于所需资产提升了一个目录级别，但已添加了一个额外的父目录 (!)。此外，其中一个 URL 的硬资产文件夹名称已更改 (!)。很奇怪：

我很抱歉继续伏都教，但这是我的工作吞咽管：

和正确的输出：