如何有sourcemaps包括我所有的LESS與一飲而盡文件

Question

我在我的/文件夾少少了兩個文件：

main.less：

@import 'vars'; 

body{ 
    background-color: @blau; 
} 

和vars.less

@blau : #6621ab; 

我的一口氣任務使用無and g和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。任何想法？在此先感謝

Answer 1

據我瞭解您的配置生成以下sourcemap代碼：

/*# 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等不應該包含在sourcemap中。

只要你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-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 

吞氣-sourcemaps輸出相同的結果作爲與兩個--source-map-less-inline和--source-map-map-inline選項

編譯