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 example repo。

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

1 个答案: