已编译、缩小和串联的 css 文件和 sass 文件之间的源映射

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));
});

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

Answer 1

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

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。

已编译、缩小和串联的 css 文件和 sass 文件之间的源映射

Sourcemap between compiled, minified and concatenated css file and sass files

css

sass

gulp

source-maps

gulp-sourcemaps