Почему sourcemaps строятся неправильно?

Question

[uzi_no_uzi]

Имеется gulpfile.js (приведен ниже). Все работает таким образом: Все lessфайлы подключены к одному основному, который компилируется styles.less. gulp.watch отслеживает изменение любого lessфайла и компилирует все в один файл styles.css который находится в appпапке. Далее идет конкатенация и минификация всех cssфайлов в папке app, после чего все в скомпилированном, сжатом виде копируется в dist/css

Получается, что сначала sourcemapsпрописываются для lessфайлов. После чего они прописываются еще между cssфайлами, при конкатенации, и в итоге должно получится так, что основной файл со стилями должен делится на lessфайлы по картам (_basic.less, _fonts.less и тд.), а на файлы типаbootstrap.min.css тоже должны быть свои карты. Для этого при конкатенации cssфайлов в настройках soursemapsстоит подгрузка уже готовых карт, но работает не корректно по какой-то причине, как можно исправить проблему?

По сути cssфайлы хорошо делятся по картам, а вот вместо всех lessфайлов почему-то прописывается _basic.less, хотя стили на скриншоте относятся к_header.less файлу.

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    cssmin = require('gulp-cssmin'),
    sourcemaps = require('gulp-sourcemaps'),
    rigger = require('gulp-rigger'),
    uglify = require('gulp-uglify'),
    browserSync = require('browser-sync').create(),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    concat = require('gulp-concat'),
    htmlmin = require('gulp-htmlmin')



var path = {

    build: {
        html: 'dest',
        less: 'app/css',
        js: 'dest/js',
        img: 'dest/img',
        fonts: 'dest/fonts',
        libs: 'dest/libs',
        css: 'dest/css'
    },

    src: {
        html: 'app/*.html',
        less: 'app/less/styles.less',
        js: 'app/js/*.js',
        img: 'app/img/**/*.*',
        fonts: 'app/fonts/**/*.*',
        libs: 'app/libs/**/*.*',
        css: 'app/css/*.css'
    },

    watch: {
		html: 'app/*.html',
		js: 'app/js/*.js',
		less: 'app/less/**/*.less',
		img: 'app/img/**/*.*',
        fonts: 'fonts/**/*.*',
        css: 'app/css/*.css'
	}
}

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "dest",
            index: "mainpage.html"
        }
    });
});

gulp.task('build:html', function() {
    gulp.src([path.src.html, '!app/header.html'])
    .pipe(rigger())
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest(path.build.html))
    .pipe(browserSync.reload({stream: true}))
})


gulp.task('build:less', function(){
    gulp.src(path.src.less)
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.less))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('build:css', ['build:less'], function() {
    gulp.src(path.src.css)
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(concat('styles.min.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.css))
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('build:js', function() {
    gulp.src(path.src.js)
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.js))
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('build:img', function() {
    gulp.src(path.src.img)
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngquant()],
        interlaced: true
    }))
    .pipe(gulp.dest(path.build.img))
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('build:fonts', function() {
    gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.build.fonts))
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('build:libs', function() {
    gulp.src(path.src.libs)
    .pipe(gulp.dest(path.build.libs))
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('watch', function() {
    gulp.watch(path.watch.html, ['build:html'])
    gulp.watch(path.watch.css, ['build:css'])
    gulp.watch(path.watch.fonts, ['build:fonts'])
    gulp.watch(path.watch.libs, ['build:libs'])
    gulp.watch(path.watch.js, ['build:js'])
    gulp.watch(path.watch.img, ['build:img'])
    gulp.watch(path.watch.less, ['build:css'])
})

gulp.task('default', ['browser-sync', 'watch', 'build:html', 'build:img', 'build:css', 'build:js', 'build:libs', 'build:fonts']);

Comments

[ⓒⓢⓢ]

я так думаю из-за минификации, сначала стили сжимаются, а потом по сжатым делается карта, но скорее всего ошибаюсь, давно уже с галпом работал ... да и минификация для разработки не нужна, а для прода карты будут лишними

gulp.task('build:less', function(){
    gulp.src(path.src.less)
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cssmin()) /* <---------- */
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.less))
    .pipe(browserSync.reload({stream: true}))
});

Answer 1

[Astelit808]

скинул настройки DevTools по умолчанию и все заработало