Skip to content

Latest commit

 

History

History

gulp-format-html

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

__tests__

__tests__

 
 

src

src

 
 

CHANGELOG.md

CHANGELOG.md

 
 

README.md

README.md

 
 

package.json

package.json

 
 

tsup.config.ts

tsup.config.ts

 
 

README.md

gulp-format-html

NPM VERSION NPM DOWNLOADS

Install

npm install gulp-format-html -D
yarn add gulp-format-html -D
pnpm add gulp-format-html -D

Setup

const gulp = require('gulp')
const formatHTML = require('gulp-format-html')
// or
// const { formatHTML } = require(`gulp-format-html`)

function views() {
  return gulp.src('views/**/*.html').pipe(formatHTML()).pipe(gulp.dest('dist'))
}

exports.dev = gulp.series(views)
import gulp from 'gulp'
import formatHTML from 'gulp-format-html'
// or
// import { formatHTML } from 'gulp-format-html'

function views() {
  return gulp.src('views/**/*.html').pipe(formatHTML()).pipe(gulp.dest('dist'))
}

export const dev = gulp.series(views)

Example

Input:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>gulp-format-html</title></head><body><header><h1><span>I am h1 in header</span></h1></header><main><p><span>span</span><b>b</b><strong>strong</strong><em>em</em></p></main><footer><p><a href="https://github.com/ntnyq/gulp-format-html">gulp-format-html</a></p></footer></body></html>

Output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>gulp-format-html</title>
  </head>

  <body>
    <header>
      <h1>
        <span>I am h1 in header</span>
      </h1>
    </header>
    <main>
      <p>
        <span>span</span>
        <b>b</b>
        <strong>strong</strong>
        <em>em</em>
      </p>
    </main>
    <footer>
      <p>
        <a href="https://github.com/ntnyq/gulp-format-html">gulp-format-html</a>
      </p>
    </footer>
  </body>
</html>

Options

gulp-format-html is based on js-beautify, Check it's HTML options for detail.

verbose

  • type boolean
  • default false

Display name of file from stream that is being formatting

Related

  • gulp-diffable-html Zero config HTML formatter to make HTML more readable and to indent HTML tag text in a single newline.