2

我有一个简单的较少任务的 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 正确。

已经处理这件事很长一段时间了，任何帮助将不胜感激！

4

2 回答 2

2

你已经有源地图内联在那里。如果你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/

于 2014-10-15T09:13:40.397 回答
1

对于那些偶然发现这篇文章并想知道如何为非 base64 格式的地图获取单独文件的人 - 您可以传递相对于目的地的路径。

例如：

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

于 2016-09-01T12:58:25.030 回答