css - 编译，缩小和串联的CSS文件和SASS文件之间的Sourcemap

我有以下任务，它将* .scss文件编译为scc，将它们最小化并连接到一个css文件。

gulp.task("scss-to-css", ["clean-css"], function () {
return gulp.src(pathToScssFiles)
    .pipe(sass())
    .pipe(minifyCss({}))
    .pipe(concat("app.min.css"))
    .pipe(gulp.dest(contentDir));
});

是否可以将app.min.css中的sourcemap添加到* .scss文件中？

最佳答案

我建议使用gulp-ruby-sass模块而不是gulp-sass。
当我尝试像您一样制作源地图时，我无法获取原始的每个scss文件的源地图。所以我在寻找其他方法，下面的gulpfile代码似乎更好。

var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var minifyCss = require('gulp-minify-css');
//var sass = require('gulp-sass');
var sass = require('gulp-ruby-sass');


gulp.task('scss-to-css', function() {

    return sass('scss/*.scss', { sourcemap: true })
    .pipe(sourcemaps.write())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(minifyCss({}))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe( concat("app.min.css"))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest( './build' ));
});

gulp.task('default', ['scss-to-css']);

在运行gulp之前，需要gem install sass。

请参考github example repo。