gulp有格式化html的插件吗？

Question

我通过jade的pretty:true

//编译jade
gulp.task('jade:compile',function(){
   return gulp.src('src/*.jade')
    .pipe(plumber())
    .pipe(changed('./build/',{extension:'.html'}))
    .pipe(jade({
        pretty: true
    }))
    .pipe(gulp.dest('./build/'));
});

生成出来的html格式是这样的，的确块级元素会各占一行，但是会把行内元素都挤成一行

<div class="tab-wrap tbl tbl-2-col"><a class="tbl-cell active"><span>已发货</span></a><a class="tbl-cell"><span>未发货</span></a>
      </div>

能否每个标签都占一行呢？

<div class="tab-wrap tbl tbl-2-col">
    <a class="tbl-cell active">
        <span>已发货</span>
    </a>
    <a class="tbl-cell">
        <span>未发货</span>
    </a>
</div>

像那些格式化工具那样，或者jade直接有这样的设置吗？

Answer 1

官方文档上表示 Pug 为了节省空间，使用内嵌标签的语法，并没找到相关选项。

所以利用 gulp-html-beautify 和 gulp-htmlmin 这两个插件来控制 html 的格式化就好了。

gulp.task('pug', function() {
    return gulp.src(globs)
        // 不使用 pug 自带的格式化方案
        .pipe(pug())
        .pipe(htmlBeautify({
            indent_size: 4,
            indent_char: ' ',
            // 这里是关键，可以让一个标签独占一行
            unformatted: true，
            // 默认情况下，body | head 标签前会有一行空格
            extra_liners: []
        }))
        // 最后使用 htmlmin 来统一输出的 html 格式
        .pipe(htmlmin({
            ...
        }))
        .pipe(gulp.dest(dest))
})

Answer 2

不应该啊，pretty选项开启以后，出来的内容就是你要的了。估计是你哪里用的不对吧，贴你的代码

补充：

最新的gulp-jade已经更名为gulp-pug了，你用的是最新版么？

Answer 3

内联元素本身排一行才合理吧，独占一行会有空格了