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

【问题标题】：How does gulp-sourcemaps retrieve ** matched path from src methodgulp-sourcemaps 如何从 src 方法中检索 ** 匹配的路径
【发布时间】：2015-05-10 13:38:56
【问题描述】：

我正在使用 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？

【问题讨论】：

标签： node.js gulp gulp-sourcemaps

【解决方案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 Code 可以在调试 npm/gulp 任务时使用 be a big help！那篇文章展示了如何设置断点、检查变量等，我发现这些非常有用。

【讨论】：