What is the correct way to minify CSS in gulp?

Question

gulp.js

I have been working for a week without a normal CSS map in the build. Pretty painful to debug. Help, pliz, who is in the subject.
Bottom line: After minification (tried both gulp-minify-css and gulp-csso), an incorrect link-map is created (common-app.min.css.map). As a result, in all browsers, when debugging, the addressing of CSS classes in source files is not displayed.

gulp.task('css', function() {
    var cssFilter = gulpFilter('**/*.css');
    gulp.src(CSS_SRC)
    .pipe(plumber())
    .pipe(order([
    "app-struct.css",
      "app-colors.css",
       "app-widgets.css",
       "app-grid2-grey.css",
       "app-animate.css"
   ]))
    .pipe(sourcemaps.init({debug:true}))
    .pipe(concat('common-app.css'))
    .pipe(sourcemaps.write('.',{debug:true})) 
                             // это файл корректен, адресация отображается
    .pipe(gulp.dest(CSS_BUILD))
    .pipe(cssFilter)
    .pipe(minifyCSS())
    .pipe(rename({
       suffix: ".min",
    }))
    .pipe(sourcemaps.write('.',{debug:true}))  // а здесь уже всё поломано..   :((
 //   .pipe(utf8ize())   // это пробовал, не помогает.
    .pipe(gulp.dest(CSS_BUILD))
});

For mapping, gulp-sourcemaps was used (I did not find others).
Either a link to the correct CSS mapper, or a description of the structure of the map file (or a link to the description) will be fine as an answer so that I can write the mapper myself.

Answer 1

Perhaps this will help https://www.npmjs.com/package/gulp-cssmin
There, in the description, there is a link to the cssmin configuration parameters, in which there is an option sourceMap: true.

Answer 2

Tried?

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('minify-css', function() {
  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(minifyCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

Answer 3

https://www.npmjs.com/package/gulp-clean-css - This plugin fits here

Answer 4

If you use a preprocessor, then you can write like this, naturally with your own paths, etc.

function sassOnCss(done) {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css'))
    .pipe(gulp.src('sass/main.sass'))
    .pipe(sass({
        outputStyle: 'compressed' // минифицируем только файл main.sass
    }))
    .pipe(rename('main.min.css')) // дописываем к минифицированному файлу .min - main.min.css
    .pipe(gulp.dest('css'));

    done();
}