How to collect a source map (sourcemaps) for sass into one output file?

Question

gulp.js

Hello! There are a lot of scss files, they are compiled into css files using gulp-ruby-sass, the following code generates a lot -> a lot map, that is, a lot of css files and the same number of map files.

gulp.task('sass', function () {
    return sass('./source/scss/', {
            compass: true,
            sourcemap: true,
            cacheLocation: './.sass-cache'
        })
        .on('error', function (err) {
            console.error('Error', err.message);
        })
        .pipe(sourcemaps.write('../maps', {
            includeContent: false,
            sourceRoot: 'source'
        }))
        .pipe(gulp.dest('./source/css'))
        .pipe(bust())
        .pipe(gulp.dest('.'));
});

There are several tasks that also process css, for example, autoprefixer processing is done, concat is connected and minified into one file. So how do I have a .map file next to this output css file?

Answer 1

The answer to my question is the following: in the first task (for example, compiling sass files), we write in the task .pipe(sourcemaps.init()), but in the following tasks, we need to initialize the maps using the loadMaps: true parameter
.pipe(sourcemaps.init({loadMaps: true})).

Answer 2

gulp.task('sass', function () {
  gulp.src('/path/to/**/*.sass')
    .pipe(sourcemaps.init())
    .pipe(sass({}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('css/dir'));
});