gulp-sourcemaps 如何从 src 方法中检索 ** 匹配的路径

Question

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

我有几个这样的组件：

public
 |-- src
      |-- comp1
      |     |-- c1-a.js
      |     |-- c1-b.js
      |
      |-- comp2
            |-- c2-a.js
            |-- c2-b.js

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

public
 |-- dist
 |    |-- comp1
 |    |     |-- c1-a.min.js
 |    |     |-- c1-a.min.js.map
 |    |     |-- c1-b.min.js
 |    |     |-- c1-b.min.js.map
 |    |
 |    |-- comp2
 |          |-- c2-a.min.js
 |          |-- c2-a.min.js.map
 |          |-- c2-b.min.js
 |          |-- c2-a.min.js.map
 |
 |-- src/

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

gulp.task('component', function() {
  gulp.src('./public/src/**/*.js', {base: './public/src'})
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: '/src/' // here's the problem
    }))
    .pipe(gulp.dest('./public/dist'))
})

但是有两个问题：

地图文件中的sourceRoot不正确：期待 "sourceRoot":"/src/comp1/" 但结果是 "sourceRoot":"/src/"
压缩文件中也没有sourceMappingURL：期待 sourceMappingURL=c1-a.min.js.map 但结果是 sourceMappingURL=../../comp1/c1-a.min.js.map

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

Answer 1

您的 sourceRoot 被设置为 /src/ 因为这是您在此处告诉它的内容：

gulp.src('./public/src/**/*.js', {base: './public/src'})

您已设置 {base: './public/src'}，因此该行中的所有内容都将处理相对于 src 的路径，因此这是正确的 sourceRoot。但是在映射的顶部，它应该具有相对于 "sources":[...] 部分中的路径（例如 "sources":["comp1/c1-a.min.js.map"]）。

然而，如果您真的想更改 sourceRoot，可以使用 sourceRoot option to gulp-sourcemaps 来实现，但是您的 sources 将是错误的。然而，gulp-sourcemaps 版本 2.0.0-alpha（你必须在你的 package.json 中明确请求，因为它是预发行版）也有一个 mapSources 选项让你也可以修改它们.

同样，您可以使用sourceMappingURLPrefix 或sourceMappingURL 来更改sourceMappingURL。在后一种情况下，您将获得完整的 file 对象，因此您可以检查例如cwd、base等console.debug或Visual Studio调试npm/gulp任务时代码可以be a big help！那篇文章展示了如何设置断点、检查变量等，我发现这些非常有用。

gulp-sourcemaps 如何从 src 方法中检索 ** 匹配的路径

How does gulp-sourcemaps retrieve ** matched path from src method

node.js

gulp

gulp-sourcemaps