@myskypesla

Как в Pug отменить inline-tags при компиляции?

Привет.

Как в Pug (task manager - Gulp) отменить inline-tags при компиляции?

Есть код

.links
  a(href='#').link: img(src='img/some-img.png' alt='')
  a(href='#').link: img(src='img/some-img.png' alt='')
  a(href='#').link: img(src='img/some-img.png' alt='')
  a(href='#').link: img(src='img/some-img.png' alt='')


Gulp'ом компилируется в такой HTML:
<div class="links"><a href="#" class="link"><img src="img/some-img.png" alt=""/></a><a href="#" class="link"><img src="img/some-img.png" alt=""/></a><a href="#" class="link"><img src="img/some-img.png" alt=""/></a><a href="#" class="link"><img src="img/some-img.png" alt=""/></a></div>


А нужно чтобы было так:
<div class="links">
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
  <a href="#" class="link">
    <img src="img/some-img.png" alt=""/>
  </a>
</div>


Я добился такого отображения только удалением в каждом проекте из папки node_modules/pug_parser в файле inline-tags.js тегов a, img, span и т.д., но в каждом проекте так делать неправильно, потому что иногда приходится переустанавливать node_modules или передавать другим разработчикам проект, и я или они могу забыть удалить из этого файла теги.

Подскажите настройки gulp-pug.
  • Вопрос задан
  • 803 просмотра
Решения вопроса 1
yarkov
@yarkov
Помог ответ? Отметь решением.
Пригласить эксперта
Ответы на вопрос 3
fergussawyer
@fergussawyer
Front-End
Нашел чудо-плагин, который решает проблему автора, решил поделиться.
gulp-format-html
Очень нужная вещь, сам долго мучился с этими inline тегами.
Мне другие способы отформатировать текст не помогали, в том числе gulp-html-prettify.
Ответ написан
{ pretty: true }

pretty: boolean | string
[Deprecated.] Adds whitespace to the resulting HTML to make it easier for a human to read using ' ' as indentation. If a string is specified, that will be used as indentation instead (e.g. '\t').

We strongly recommend against using this option: Too often it creates subtle bugs in your templates because of the way it changes the interpretation and rendering of whitespace, and so this feature is going to be removed. Defaults to false.

https://pugjs.org/api/reference.html
Ответ написан
@maxhd
может кому пригодится)

npm i prettier --save-dev

// package.json
"scripts": {
  "pretty": "prettier --write ./dist/*.html"
},


// .prettierrc.json
{
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 128
}


npm run pretty

можно как нить автоматизировать для production сборки
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы