翡翠编译成一行

Question

我的问题是，当我在gulp中编译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预处理器不会在其自己的行中放置内联元素，如<span>或<i>。好的会让你覆盖默认行为。似乎使用Jade的内置pretty选项无法做到这一点。

这意味着你必须使用像gulp-prettify这样的外部HTML美化器。它基于具有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('./'));
});