Как заставить gulp source map работать нормально?

Question

[Илья Кочкин]

Добрый день, имеется небольшой файл сборки gullp.js
смысл которого сначала собираются все файлы библиотек из source/scss/lib_css в одну далее он отправляется в промежуточную папку source/css далее собирается из папки source/scss все файлы scss склеиваются и отправляются в промежуточную папку source/css, далее все файлы из промежуточной папки source/css мы собираем все в один и выкидываем его в итоговую папку. Все это дело работает с gulp source map но вот незадача он как то криво работает с clean-css выдает в браузере неправильные строки devtools

const gulp = require('gulp');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');

const dest='./resources/production/';
const base_src='./resources/source/';
const css_src=base_src+'css/';

const scss_src=base_src+'scss/';
const lib_scss=scss_src+'scss_lib/';
const lib_css=scss_src+'css_lib/';




function build_css_lib(){
    return gulp.src(lib_css+'**/*.css')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat('lib.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(css_src))
}
function build_all_css(){
    return gulp.src([css_src+'**/*.css','!'+css_src+'header.css'])
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(concat('stylesheet.css'))
        .pipe(autoprefixer({
            overrideBrowserslist: ['>0.1%'],
            cascade: false,
        }))
        .pipe(cleanCSS({
            level:2
        }
        ))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(dest+'css/'))
}

function build_header_scss(){
    return gulp.src(scss_src+'header.scss')
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(css_src))
}

function build_all_scss(){
    return gulp.src([scss_src+'**/*.scss','!'+scss_src+'header.scss'])
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('main.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(css_src))
}
function watch(){
    gulp.watch(lib_css+'**/*.css', build_css_lib);
    gulp.watch([css_src+'**/*.css','!'+css_src+'header.css'], build_all_css);
    gulp.watch([scss_src+'**/*.scss','!'+scss_src+'header.scss'], build_all_scss);
    gulp.watch(scss_src+'header.scss', build_header_scss);
}

gulp.task('default', gulp.series(
    gulp.parallel(build_header_scss, build_all_scss, build_css_lib),
    build_all_css,
    watch)
);

Comments

[Dymok]

Кажется, он работает криво из-за того, что инициализируется несколько раз.
Почему не использовать import в sass?

[Илья Кочкин]

Dymok, если убрать pipe clean CSS то все пройдет хорошо