node.js - gulp-sourcemaps 将源指向错误的目录

Question

我正在尝试使用 gulp-sourcemaps 为我的 sass 和 js 文件创建源映射，但是 sources: [ ... ] 中的路径始终仅相对于源，而不是相对于源目标目录。

我的项目结构如下所示:

project
|-- public/
|   |-- css/
|   |   |-- main.scss
|   |   `-- dashboard.scss
|   |-- js/
|   |   |-- dashboard/
|   |   |   `-- dashboard.js
|   |   `-- app.js
|   |-- index.html
|   |-- app.min.js
|   |-- app.min.js.map
|   |-- style.css
|   `-- style.css.map
`-- gulpfile.js

这是我的两个 gulp 任务:

gulp.task('sass', function() {
    // only need main.scss because I'm using @import
    return gulp
        .src('./public/css/main.scss')
        .pipe(sourcemaps.init())
            .pipe(sass())
        .pipe(rename('style.css'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./public'));
});

gulp.task('uglify', function() {
    return gulp
        .src(['./public/js/app.js', './public/js/**/*.js'])
        .pipe(sourcemaps.init())
        .pipe(concat('app.concat.js'))
            .pipe(uglify())
        .pipe(rename('app.min.js'))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./public'));
});

运行这些任务后， map 文件如下所示:

{"version":3,"sources":"main.scss","dashboard.scss"], ... }
{"version":3,"sources":["app.js","dashboard/dashboard.js"], ... }

但我希望它们与实际目录相关

{"version":3,"sources":["css/main.scss","css/dashboard.scss"], ... }
{"version":3,"sources":["js/app.js","js/dashboard/dashboard.js"], ... }

那么怎样才能得到想要的结果呢？我的配置有什么问题吗？

Answer 1

要使用 gulp-sourcemaps 控制源映射文件中源的路径，您应该将 options 参数传递给 sourcemaps.write 命令，在该命令中指定 sourceRoot 的相对目录。例如:

gulp.task('javascript', function() {
  var stream = gulp.src('src/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(plugin1())
      .pipe(plugin2())
    .pipe(sourcemaps.write({includeContent: false, sourceRoot: '/src'}))
    .pipe(gulp.dest('dist'));
});

此片段取自 gulp-sourcemaps documentation 。有关示例，请参阅此 GitHub repository ，我使用 gulp-sourcemaps 和 gulp-typescript 将生成的 javascript 源文件映射回 typescript 文件。