Question

我一直试图让gulp sass和gulp sourcemaps完全按照我的意愿去做，而且我发现它很难。我想获取一个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'));

结果：写一个单独的源图，但sourceRoot说＆＃39; / sources /＆＃39; （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现在是我的工作文件夹，这很好，内容不包含在内，这很好，但是源图中的文件仍然相对于sass条目文件而不是sourceRoot，所以我的地图还是没用的

尝试4：设置gulp.src base

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上设置基础修复了源映射 - 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}

gulp.src中的

使得每个匹配的文件都具有来自基数的完整路径，然后使它们从您设置基数的任何地方输出完整的相对路径。我最终得到的解决方案是使用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'));

一旦你了解了我想做的事情，我就会很容易。

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

源地图位置错误或路径不正确

2 个答案: