6

我在我的 gulpjs 构建中通过 gulp-less 使用 LESS 编译器。我已经启用了 sourceMap 生成，它有点工作，正确的文件名和行号在那里。

使用源映射生成 LESS 的 gulp 行非常简单：

var less = require('gulp-less');

// [...]

gulp.src('web/css/**/*.less')
    .pipe(less({
        sourceMap: true
    }))
    .pipe(gulp.dest('dist/css'));

唯一的问题是源映射包含原始 .less 文件的 URL，并且它是作为我的文件系统的绝对路径生成的，例如/Users/myuser/projects/project/web/css/myfile.less.

在开发过程中，我通过 Apache 为站点提供服务。当我使用 Chrome DevTools 打开站点时，我可以检查元素，并且源映射正在工作，因为我可以myfile.less在样式面板上看到包含正确的行号。但是，Chrome 正在尝试加载较少的文件，并且它使用的是源映射输出的完整路径，但假设它是我网站的相对 url，因此它会尝试加载http://localhost/Users/myuser/projects/project/web/css/myfile.less不存在的文件。

我尝试使用工作区来修复它，但并没有真正管理。这个设置有问题吗？我错过了什么吗？

4

5 回答 5

1

尝试使用sourceMapRootpath而不是sourceMapBasepath

gulp.src('web/css/**/*.less')
.pipe(less({
   sourceMap: true
   sourceMapRootpath: './my_less_path'
}))

对我来说，这个解决方案之所以有效，部分原因是我在另一个 less 文件（例如 bower_components / .. / grid.less）中导入的文件仍然带有绝对路径。仍然找不到解决方案。如果有人可以提供帮助会很棒...... :)

于 2014-06-11T12:19:28.670 回答
1

我认为你错过了这些最后的步骤：

  1. 为您的站点创建一个工作区。将 Chrome 指向系统上站点的根目录。
  2. 在 Sources 面板中右键单击源映射的 less 文件，然后选择“Map to File System Resource...”。选择文件系统上较少的源文件。

重新加载开发工具（你会得到一个提示），你应该很好。现在，当您单击foo.less:45样式面板中的 时，您应该会被带到foo.less. 现在您已经设置了工作区，如果您将更改保存在开发工具中，它将保留在源文件中。好的！

请注意，Chrome 有一个相当大的错误，您可能会立即注意到。当您通过开发工具添加样式规则时，源映射被破坏： https ://github.com/less/less.js/issues/1050#issuecomment-26195595

让我知道这是否有帮助。如果需要，我也可以稍后发布屏幕截图。

于 2014-05-21T19:16:09.510 回答
1

要回答我自己的问题，正确的方法是在 gulp 管道中使用gulp-sourcemaps而不是将属性传递给 LESS 插件。因此，以下语法对我有用：

gulp.src('web/css/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist/css'));
于 2014-10-12T02:24:21.877 回答
0

我在使用 typescript 源地图时遇到了类似的问题——地图中的路径将生成为“../src/file.ts”，其中 src 与输出目录处于同一级别。
dir |- src/*.ts |- output/*.js

我的网络服务器直接在输出上运行，所以 chrome 试图从http://localhost/src/file.ts
下载一个不存在的源文件 我的解决方案是在输出文件夹中创建一个符号链接“src”，现在它很高兴。不是真正的“修复”，但可以解决问题。

于 2015-11-05T16:02:23.357 回答
-1

尝试以下操作：

gulp.src('web/css/**/*.less')
    .pipe(less({
       sourceMap: true
       sourceMapBasepath: './my_less_path'
    }))
于 2014-03-26T20:22:18.770 回答