我通过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-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))
})
不应该啊,pretty
选项开启以后,出来的内容就是你要的了。估计是你哪里用的不对吧,贴你的代码
补充:
最新的gulp-jade
已经更名为gulp-pug了,你用的是最新版么?
内联元素本身排一行才合理吧,独占一行会有空格了