編譯，縮小和串聯的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']);

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

請參考github示例倉庫 。