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

您已经在内嵌了源图。如果你对sourceMappingURL=data:application/json;base64,之后的内容进行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（＆＃39; ./&# 39））

Gulp gulp-less和gulp-sourcemaps提供错误的sourceMappingURL

2 个答案: