Gulp-gulp-less и gulp-sourcemaps дают неверный источник MappingURL

Question

У меня есть рабочий процесс gulp с простой простой задачей, например:

gulp.task('less', function() {
    gulp.src(source_less)
        .pipe(sourcemaps.init())
        .pipe(less({
            sourceMap: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(dest_less));
});

Я хочу, чтобы модуль gulp-sourcemaps отображал исходные карты в виде встроенных комментариев в моем файле CSS. Но всякий раз, когда gulp компилирует мой LESS, gulp-sourcemaps не отображает путь к моему исходному файлу. Вместо этого он отображает что-то вроде этого:

/*#     sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
        VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
        ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
        sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

Я значительно упростил мой gulpfile, удалив livereload, autoprefixer и прочее. Но даже в этой урезанной версии я не могу получить правильный исходный URL.

Если бы я был над этой вещью в течение достаточно долгого времени, любая помощь будет очень цениться!

Answer 1

У вас уже есть встроенные исходные карты. Если вы base64 декодировать, что будет после sourceMappingURL=data:application/json;base64, вы получите это:

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n    background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}

Попробуйте сами здесь: https://www.base64decode.org/

Answer 2

Для тех, кто наткнулся на этот пост и интересуется, как получить отдельный файл для карты, который не в формате base64 - вы можете указать путь относительно места назначения.

Например:

.pipe (sourcemaps.write ('./'))