M
M
myskypesla2017-03-16 11:45:05
Pug
myskypesla, 2017-03-16 11:45:05

How to disable inline-tags on compilation in Pug?

Hello.
How to cancel inline-tags in Pug (task manager - Gulp) when compiling?
There is a code

.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 compiles to this 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>

And it needs to be like this:
<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>

I achieved such a display only by deleting the a, img, span, etc. tags from the node_modules / pug_parser folder in the inline-tags.js file in each project, but it is wrong to do this in each project, because sometimes you have to reinstall node_modules or transfer to others project developers, and I or they may forget to remove the tags from this file.
Please tell me gulp-pug settings.

Answer the question

In order to leave comments, you need to log in

4 answer(s)
A
Alexey Yarkov, 2017-03-16
@myskypesla

{pretty: true}

Y
Yuri Uvarov, 2020-05-10
@fergussawyer

I found a miracle plugin that solves the problem of the author, I decided to share it.
gulp-format-html
A very necessary thing, I myself suffered for a long time with these inline tags.
Other ways to format the text did not help me, including gulp-html-prettify.

A
Alexey Ukolov, 2017-03-16
@alexey-m-ukolov

{ pretty: true }
[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 (eg '\t').
https://pugjs.org/api/reference.html

M
maxhd, 2020-10-20
@maxhd

may be useful to someone)
npm i prettier --save-dev

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

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

npm run pretty
it is possible to automate as a thread for production assembly

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question