如何使用 gulp 让源映射包含我所有的 LESS 文件答案

【问题标题】：How to have sourcemaps include all my LESS files with gulp如何使用 gulp 让源映射包含我所有的 LESS 文件
【发布时间】：2014-08-31 12:18:22
【问题描述】：

我的 /less 文件夹中有两个 LESS 文件：

main.less:

@import 'vars';

body{
  background-color: @blau;
}

和 vars.less

@blau : #6621ab;

我的 gulp 任务使用 gulp-less 和 gulp-sourcemaps

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/'))
});

CSS 生成（在 /public/main.css）工作正常，但在源映射中，我只能看到 main.less，而不是 vars.less。任何的想法？提前致谢

【问题讨论】：

标签： less gulp gulp-less gulp-sourcemaps

【解决方案1】：

据我了解您的配置生成以下源映射代码：

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTtFQUNFLHlCQUFBIiwiZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAndmFycyc7XG5cbmJvZHl7XG4gIGJhY2tncm91bmQtY29sb3I6IEBibGF1O1xufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */

编码版本：

{"version":3,"sources":["main.less"],"names":[],"mappings":"AAEA;EACE,yBAAA","file":"main.css","sourcesContent":["@import 'vars';\n\nbody{\n  background-color: @blau;\n}\n"],"sourceRoot":"/source/"}

您的vars.less 不会向 CSS 生成任何输出，因此不应包含在源映射中。

一旦您的vars.less 生成输出，例如在此文件末尾添加.selector {p:1;}，该文件也将包含在源映射中：

{"version":3,"sources":["vars.less","main.less"],"names":[],"mappings":"AACA;EAAW,IAAA;;ACCX;EACE,yBAAA","file":"main.css","sourcesContent":["@blau : #6621ab;\n.selector {p:1;}\n","@import 'vars';\n\nbody{\n  background-color: @blau;\n}\n"],"sourceRoot":"/source/"}

注意，lessc 编译器有不同的 source maps 选项：

  --source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
  --source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
  --source-map-basepath=X  Sets sourcemap base path, defaults to current working directory.
  --source-map-less-inline puts the less files into the map instead of referencing them
  --source-map-map-inline  puts the map (and any less files) into the output css file
  --source-map-url=URL     the complete url and filename put in the less file

gulp-sourcemaps 输出的结果与使用 --source-map-less-inline 和 --source-map-map-inline 选项编译时的结果相同

【讨论】：

嗨，低音！通过将 gulp.src('./less/main.less') 替换为 gulp.src('./less/*.less') 其生成的 vars.css 文件，以及它自己的源映射。然后，将 vars.css 包含到我的 html 中，我可以看到它的源代码：D 你知道将 vars.less 源映射包含到 main.css 中的任何技术，所以我只需要包含一个文件吗？感谢您的宝贵时间！