1

我一直在努力让 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'));

结果：写了一个单独的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 中相同的深层结构。

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

4

2 回答 2

2

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

{ 基础：__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'));

一旦你了解更多关于它试图做什么我猜很容易。

于 2016-08-28T03:16:04.573 回答
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'));
于 2016-05-26T12:53:14.313 回答