使用Gulp，我能够生成从SASS转换而来的CSS，其源代码指向原始的SASS文件，我也能够生成源图来调试缩小的CSS，但到目前为止我一直无法弄清楚如何（如果是甚至可能）使用Gulp生成源图，允许您调试从SASS and 缩小的转换后的CSS，以及添加供应商前缀等 . 我已设法生成一些源图输出，但它们最终映射回到错误的行中我执行转换和缩小时的.scss文件 .
下面的代码确实生成了源图，作为浏览器选择和读取的输出，但正如我之前所说，Chrome调试工具指向原始.scss文件中的错误文件/行 .
这是我的css-compile Gulp任务 .
// compile SASS
'use strict';
var gulp = require('gulp'),
gutil = require('gulp-util'),
plugins = require('gulp-load-plugins')(),
browserSync = require('browser-sync'),
config = require('../config/css-compile.json'),
isStaging = true,
isProduction = false;
gulp.task(config.taskName, function () {
return gulp.src(config.dirs.src)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass(config.sass,{sourcemap: true}).on('error', plugins.sass.logError))
.pipe(gulp.dest(config.dirs.dest))
.pipe(plugins.minifyCss({map: true}))
.pipe(plugins.sourcemaps.write('./'))
.pipe(gulp.dest(config.dirs.dest));
});