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'))
})

但有两个问题:

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

2. 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，您可以使用sourceRootgulp-sourcemaps 选项来执行此操作，但那样您sources就错了。但是，gulp-sourcemaps 版本 2.0.0-alpha（由于它是预发行版，因此您必须在您的版本中明确请求package.json）也有一个mapSources选项可以让您修改这些内容。

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