編譯，精簡和連接的css文件和sass文件之間的Sourcemap

Question

我有以下任務，它將* .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文件中？

Answer 1

我推薦使用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']); 

在你運行吞嚥之前，gem install sass是必需的。請致電github example repo。