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

Question

我一直在尝试使用gullow-sass和gullow-sourcemap来做我想做的事情，但我发现这很难。我想获取一个sass条目文件(src/sass/index.scss)，生成一个输出文件(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'));

结果：这将源映射内联到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的，所以我的map仍然是无用的

尝试4：设置gull.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'));

结果：令人愤怒的是，在gull.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中相同的深层结构。

如果有人能启发我如何做到这一点，我将永远感激。

Answer 1

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

｛base:__dirname｝

在gull.src中，每个匹配的文件都有从基文件的完整路径，然后使它们从你设置基文件的任何位置输出完整的相对路径。我最终得到的解决方案是使用gull-platform，它从管道中的文件中删除这些相对路径，所以我的最终函数看起来是这样的：

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

我想，一旦你对它试图做的事情有了更多的了解，就很容易了。

Answer 2

由于您的尝试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'));