玉在一條線上編譯

Question

我的問題是，雖然我在編譯Jade的時候，HTML中的一些標籤最終在同一行。 例如，這這樣結束
我希望它看起來像這樣。有可能嗎？
這裏是我的gulpfile

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

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

Answer 1

大多數HTML prettifiers不會將內聯元素一樣<span>或<i>在默認情況下自己行。好的會讓你覆蓋那個默認行爲。似乎沒有辦法用Jade的內置pretty選項來做到這一點。

這意味着您將不得不使用外部HTML美化工具，如gulp-prettify。它基於js-beautify，它有a whole plethora of options，它可以讓你影響HTML格式化。

其中unformatted選項決定哪些元素不會在自己的行上縮進。同樣默認情況下，這包括所有內聯元素。傳遞一個空列表而不是禁用該行爲：

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('./')); 
});