6

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

4

1 回答 1

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等，或者在调试 npm/gulp 任务时， console.debugVisual Studio Code 可以提供很大帮助！那篇文章展示了如何设置断点、检查变量等，我发现这些非常有用。

于 2016-10-06T23:18:05.910 回答