关于gulp：Sourcemaps位置错误或路径错误

Sourcemaps are in wrong location or have incorrect paths

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

这是我尝试过的：

尝试1：从gulp-sass直接获取示例代码：

1
2
3
4
5
6

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

结果：这会将源映射内联到CSS文件中，因此我无法确定它是否正确。

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

1
2
3
4
5

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)

1
2
3
4
5

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基础

1
2
3
4
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('dist/css'));

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

尝试5：使用绝对路径

1
2
3
4
5

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

如果有人能启发我这样做，我将永远感激不已。

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

{base：__dirname}

在gulp.src中，每个匹配的文件都具有从基准开始的完整路径，这将使它们从具有基准位置的位置开始以完整的相对路径进行输出。我最终得到的解决方案是使用gulp-flatten，它从管道中的文件中删除了这些相对路径，所以我的最终功能如下所示：

1
2
3
4
5
6

一旦您了解更多有关它要做什么的信息，我就会觉得很容易。

由于您的尝试4会执行您想要的所有事情，只是将生成的文件放置在错误的位置，因此最简单的解决方法是在生成源映射后，使用gulp-rename更改该位置：

1
2
3
4
5
6

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