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

我正在使用gulp构建项目，同时使用gulp sourcemaps生成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？

最佳答案

您的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！那篇文章展示了如何设置断点、检查变量等，我发现这些非常有用。