css - 编译、缩小和连接的 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));
});

是否可以将 app.min.css 中的源映射添加到 *.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 示例 repo。