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对象，因此您可以检查，例如在调试npm / gulp任务时，cwd，base等等console.debug或Visual Studio代码可以be a big help！那篇文章展示了如何设置断点，检查我发现非常有用的变量等。

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

1 个答案: