Gulp 源映射位于错误的位置或路径不正确

我一直在尝试让gulp sass和gulp sourcemaps完全按照我的要求来做，我发现这很难。我想获取一个sass条目文件（src/sass/index.scss），为该索引文件（dist/css/index.css）生成一个输出文件（dist/css/index.css）和一个单独的源映射（dist/css/index.css.map），该索引文件的sourceRoot设置为项目基础（绝对路径：/home/damon/projects/test），并且源映射条目相对于该路径

以下是我尝试过的：

尝试1：来自gulp sass的直接示例代码：

var sassEntry = 'src/sass/index.scss';
gulp.src(sassEntry)
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write())
 .pipe(gulp.dest('dist/css'));

结果：这将sourcemap内联到CSS文件中，因此我无法判断它是否正确

尝试2：将其写入单独的文件

gulp.src(sassEntry)
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.'))
 .pipe(gulp.dest('dist/css'));

结果：编写一个单独的源映射，但sourceRoot显示“/sources/”（WTF是吗？！，它不存在，我从未配置过它） 这些路径都是相对于sass条目文件的，而不是相对于项目库的，当我的浏览器试图定位源文件时，项目库也将变得毫无意义

尝试3：尝试修复sourceroot（我还发现includeContent:false）

结果：sourceroot现在是我的工作文件夹，这很好，没有包含内容，这很好，但是sourcemap中的文件仍然是相对于sass条目文件而不是相对于sourceroot的，所以我的映射仍然是无用的

尝试4：设置gulp.src基

gulp.src(sassEntry, { base: __dirname })
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
 .pipe(gulp.dest('dist/css'));

结果：令人恼火的是，在gulp.src上设置基修复了sourcemap-sourceRoot仍然是正确的，源文件路径相对于sourceRoot，但现在它输出到dist/css/src/sass/index.css，这是错误的。WTF

尝试5：使用绝对路径

gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest(__dirname + '/dist/css'));

结果：没有变化，它仍然输出到dist相同的深部结构

---

如果有人能告诉我如何做，我将永远感激。

由于您的尝试4除了将生成的文件放置在错误的位置之外，其他功能都可以完成，最简单的修复方法是在生成源地图后使用更改该位置：

gulp.src(sassEntry, { base: __dirname })
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: __dirname}))
 .pipe(rename({dirname:''}))
 .pipe(gulp.dest('dist/css'));

---

虽然Sven的答案非常好，但我也通过深入了解gulp的工作原理（我一直试图避免），找到了我自己问题的答案，显然gulp使用路径存储每个匹配的文件，因此添加：

{base:_dirname}

在文件中，gulp.src使每个匹配的文件都具有来自基的完整路径，这会使它们从设置基的任何位置以完整的相对路径输出。我最终得到的解决方案是使用gulp Flatte，它从管道中的文件中删除这些相对路径，因此我最终的函数如下所示：

gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(flatten())
.pipe(gulp.dest(__dirname + '/dist/css'));

---

我想，一旦你进一步了解了它想做什么，就很容易了。

谢谢，是的，实际上，在阅读了周围的内容后，我也找到了一个解决方案，那就是使用“吞咽压扁”。显然，当gulp.src找到带有glob的文件时，它会将每个文件存储为一个路径，向其中添加base选项会向其中添加完整的基本路径。gulp Flatte允许您删除管道中的路径，因此在重命名的位置也可以执行.pipe（flatte（））操作，这样就解决了这个问题。

gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(flatten())
.pipe(gulp.dest(__dirname + '/dist/css'));