Как правильно настроить gulp-sourcemap?

Question

[uzi_no_uzi]

Имеется такой gulpfile.js, установлен sourcemapплагин. Он хорошо отрабатывает, но появляется проблема. Сначала генерируется sourcemapпри компиляции lessфайлов, файл css со склеенными и скомпилированными lessфайлами добавляются в папку со всеми cssфайлами(там лежат еще сетка и normalize), все карты работают хорошо и в браузере показывается lessфайл в котором находились стили, но дальше, мне нужно сделать что бы sourcemapотрабатывал и при склеивании итоговых стилей, при том чтобы оставались карты на lessфайлы и на файлы которые склеивались уже после компиляции, проблема в том, что после склеивания, sourcemap уже показывает ссылки не на lessфайлы, а на конкретно уже откомпелированный styles.css

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



var path = {

    build: {
        html: 'dest',
        less: 'dest/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"
        }
    });
});

gulp.task('build:html', function() {
    gulp.src([path.src.html, '!app/header.html'])
    .pipe(rigger())
    .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())
    .pipe(concat('styles.min.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.build.css))
})

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.task('default', ['browser-sync', 'watch', 'build:html', 'build:img', 'build:css', 'build:js', 'build:libs', 'build:fonts']);

Answer 1

[Сергей delphinpro]

Вы при склейке забываете загружать уже сгенерированные мапы
https://www.npmjs.com/package/gulp-sourcemaps#load...

gulp-cssmin точно поддерживает сорс-мапы? Его нет в списке.

Comments

[uzi_no_uzi]

Видимо да, уже все хорошо, спасибо, ваш совет помог :)

[Сергей delphinpro]

uzi_no_uzi, судя по исходникам gulp-cssmin ничего сам не делает для поддержки сорсмапов. Хотя и использует CleanCSS, который их понимает. Я бы лучше использовал gulp-clean-css. Это тоже обертка над тем же самым CleanCSS, но с явно видимой поддержкой sourcemaps