首页 > gulp有格式化html的插件吗?

gulp有格式化html的插件吗?

我通过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直接有这样的设置吗?


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

所以利用 gulp-html-beautifygulp-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))
})

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

补充:

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


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

【热门文章】
【热门文章】