我一直在努力让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说'/ 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现在是我的工作文件夹,很好,内容不包含哪个很好,但是源图中的文件仍然相对于sass条目文件而不是sourceRoot,所以我的 Map 仍然无用
尝试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上设置基础修复了源映射 - 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中相同的深层结构 .
如果有人能告诉我如何做到这一点,我将永远感激 .