1

Плагин gulp-pug компилирует html в одну строку, как будто минифицирует. Вот pug:

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

Вот результат:

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

Как получить html c отступами и вложенностью? ну и gulpfile на всякий, может в нем причина:

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 ответ 1

3

Есть способ избежать этого частично, передав параметр pretty:

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

Почему частично: часть инлайновых элементов все равно будет в одну строчку.
Пример такой компиляции:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.