编译、缩小和连接的 css 文件和 sass 文件之间的源映射答案

【问题标题】：Sourcemap between compiled, minified and concatenated css file and sass files编译、缩小和连接的 css 文件和 sass 文件之间的源映射
【发布时间】：2016-02-19 01:56:27
【问题描述】：

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

【问题讨论】：

标签： css sass gulp source-maps gulp-sourcemaps

【解决方案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 example repo。

【讨论】：

谢谢。如果您找到没有 gem 的解决方案，请发布。