Sourcemaps 位于错误的位置或路径不正确

Question

我一直在努力让 gulp sass 和 gulp 源地图完全按照我的意愿行事，但我发现这很难。我想获取一个 sass 入口文件 (src/sass/index.scss)，生成一个输出文件 (dist/css/index.css) 和一个单独的源映射索引文件 (dist/css/index.css.map)，其中 sourceRoot 设置为项目基础（绝对路径：/home/damon/projects/test），并且 sourcemap 条目相对于该路径。

这是我尝试过的：

尝试 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'));

结果：写了一个单独的 sourcemap，但是 sourceRoot 说“/sources/”（WTF 是那个？！，它不存在而且我从未配置过它）并且路径都是相对于 sass 入口文件的，而不是项目库，当我的浏览器试图找到源文件时，这也将毫无意义。

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

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

结果：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 这是错误的。卧槽！

尝试 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中相同的深层结构。

如果有人能告诉我如何做到这一点，我将永远感激不已。

Answer 1

由于您的尝试 4 做了您想要的所有事情，除了将结果文件放在错误的位置，最简单的解决方法是在生成源映射后用 gulp-rename 更改该位置：

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'));

Answer 2

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

{ 基数：__dirname }

在 gulp.src 中使得每个匹配的文件都具有从 base 开始的完整路径，然后使它们输出从你将 base 设置到的位置的完整相对路径。我最终得到的解决方案是使用 gulp-flatten，它从管道中的文件中删除那些相对路径，因此我最终的函数如下所示：

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'));

我猜，一旦你更了解它正在尝试做什么，就很容易了。

Sourcemaps 位于错误的位置或路径不正确

Sourcemaps are in wrong location or have incorrect paths

gulp

gulp-sass

gulp-sourcemaps