2014-08-31 15 views
6

ho due file MENO nella mia cartella/meno:Come avere sourcemaps includono tutti i miei file meno con gulp

main.less:

@import 'vars'; 

body{ 
    background-color: @blau; 
} 

e vars.less

@blau : #6621ab; 

Il mio compito sorso utilizzando gulp-meno e gulp-sourcemaps

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

La generazione di CSS (in /public/main.css) funziona bene, ma in sourcemaps, posso vedere solo main.less, non vars.less. Qualche idea? Grazie in anticipo

risposta

3

Per quanto ho capito la configurazione genera il seguente codice Sourcemap:

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

La versione codificata:

{"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/"} 

tuo vars.less non genera alcun output al CSS e così non dovrebbe essere incluso nella mappa del sourc.

Non appena il vars.less genera in uscita, per esempio aggiungere .selector {p:1;} alla fine di questo file, il file sarà anche incluso nella mappa fonte:

{"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/"} 

Si noti che il compilatore lessc ha un'opzione diversa per mappe di origine:

--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 

del Gulp-sourcemaps uscite lo stesso risultato di compilazione con entrambe le --source-map-less-inline e --source-map-map-inline opzioni

+2

Ciao Bass !! Sostituendo 'gulp.src ('./ less/main.less')' con 'gulp.src ('./ less/*. Less')' sta generando il file vars.css, con il proprio sourcemapping. Quindi, incluso vars.css nel mio html, posso vedere che è il sorgente: D Conoscete qualche tecnica per includere vars.less sourcemapping in main.css, quindi devo solo includere un file? Grazie per il tuo tempo! – Karlas

Problemi correlati