Jade Compiling in einer Zeile

Question

Mein Problem ist, dass während ich Jade in Schluck kompiliere einige HTML-Tags in der gleichen Zeile landen. Zum Beispiel dieses endet wie folgt
Ich möchte es so etwas aussehen. Ist das möglich? Hier
ist mein gulpfile

gulp.task('templates', function() { 
    var YOUR_LOCALS = {}; 

    gulp.src('./*.jade') 
    .pipe(jade({ 
     pretty: true, 
     locals: YOUR_LOCALS 
    })) 
    .pipe(gulp.dest('./')) 
}); 

Answer 1

Die meisten HTML-prettifiers nicht Inline-Elemente wie <span> oder <i> auf ihre eigene Linie von Standard platzieren. Die guten lassen Sie dieses Standardverhalten jedoch überschreiben. Scheint, als ob es keine Möglichkeit gibt, das mit Jades eingebauter pretty Option zu tun.

Das bedeutet, dass Sie einen externen HTML-Prettifier wie gulp-prettify verwenden müssen. Es basiert auf js-beautify, die a whole plethora of options hat, die Sie beeinflussen können, wie Ihr HTML formatiert ist.

Unter diesen Optionen legt die Option unformatted fest, welche Elemente in ihrer eigenen Zeile nicht eingerückt werden. Dies schließt standardmäßig alle Inline-Elemente ein. Wenn Sie stattdessen eine leere Liste übergeben, wird das folgende Verhalten deaktiviert:

var prettify = require('gulp-prettify'); 

gulp.task('templates', function() { 
    var YOUR_LOCALS = {}; 

    gulp.src('./*.jade') 
    .pipe(jade({ 
     locals: YOUR_LOCALS 
    })) 
    .pipe(prettify({ 
     unformatted: [] 
    })) 
    .pipe(gulp.dest('./')); 
});