The gulp-pug plugin compiles html into one line, as if minifying. Here is a pug:

html head title Title body div p vvv p bbb p vvv

Here is the result:

 <html><head><title>Title</title></head><body><div><p>vvv</p><p>bbb</p><p>vvv</p></div></body></html>

How to get html with indents and nesting? well and gulpfile on any, the reason in it can:

 var gulp = require('gulp'), pug = require('gulp-pug'), sass = require('gulp-sass'), less = require('gulp-less'), browserSync = require('browser-sync'), reload = browserSync.reload, autoprefixer = require('gulp-autoprefixer'), paths = { pug:['app/pug/*.pug'], less:['app/less/*.less'], sass:['app/sass/*.scss'] }; //Pug gulp.task('pug', function(){ return gulp.src(paths.pug) .pipe(pug()) .pipe(gulp.dest('app')) .pipe(reload({stream: true})) }); // Less /*gulp.task('less', function(){ return gulp.src(paths.less) .pipe(less()) .pipe(autoprefixer(['last 15 versions', '> 1%'], { cascade: true })) .pipe(gulp.dest('app/css')) .pipe(reload({stream: true})) }); */ // Sass gulp.task('sass', function(){ return gulp.src(paths.sass) .pipe(sass()) .pipe(autoprefixer(['last 15 versions', '> 1%'], { cascade: true })) .pipe(gulp.dest('app/css')) .pipe(reload({stream: true})) }); // Browser-Sync gulp.task('browserSync', function() { browserSync({ server: { baseDir: 'app' }, open: true, notify: false }); }); gulp.task('watcher',function(){ gulp.watch(paths.pug, ['pug']); gulp.watch(paths.sass, ['sass']); }); gulp.task('default', ['watcher', 'browserSync']);

    1 answer 1

    There is a way to avoid this in part by passing the pretty parameter:

     //Pug gulp.task('pug', function(){ return gulp.src(paths.pug) .pipe(pug({pretty: true})) // Запретите минифицировать HTML .pipe(gulp.dest('app')) .pipe(reload({stream: true})) });

    Why partially: a part of inline elements will still be in one line.
    An example of such a compilation:

     <ul class="pagination"> <li class="page-item active"><a class="page-link" href="#">1</a></li> </ul>