CODEWITHSUNDEEP
csssassgulpsource-mapsgulp-sourcemaps
rnofenko
rnofenko

Reputation: 9533

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

I have following task which compiles *.scss files to scc, minifies them and concatenates to one css file.

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

Is it possible to add sourcemap from app.min.css to *.scss files?

Upvotes: 0

Views: 702

Answers (1)

Alfred
Alfred

Reputation: 1296

I recommend for using the gulp-ruby-sass module instead of gulp-sass. When I tried to make source map like you, I failed to get the source map of original each scss file. So I'm looking for other way, the below gulpfile code seemed to be better.

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']);

Before you run gulp, gem install sass is required.

Please refer to the github example repo.

Upvotes: 2

Related Questions