gulp-diffable-html
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

gulp-diffable-html

🍺 gulp plugin formatting html via diffable-html

NPM VERSION NPM DOWNLOADS

Install

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

Setup

const gulp = require('gulp')
const diffableHTML = require('gulp-diffable-html')
// or
// const { diffableHTML } = require(`gulp-diffable-html`)

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

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

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

export const dev = gulp.series(views)

Features

  • zero-config
  • indenting every level with 2 spaces
  • align attributes
  • put every opening and closing tag on its own line
  • trimming text nodes

Example

Input:

<!DOCTYPE html><!--[if IE 9]>.... some HTML here ....<![endif]--><html lang="en"><head><meta charset="UTF-8"><title>gulp-diffable-html</title></head><body><header><h1><span>I am h1 in header</span></h1></header><main><p><!----><span></span><b>b</b><strong>strong</strong><em>&copy;</em><!-- This comment should be removed --></p></main><footer><p><a href="https://github.com/ntnyq/gulp-diffable-html" target="_blank" rel="noopener" >gulp-diffable-html</a></p></footer></body></html>

Output:

<!DOCTYPE html>
<!--[if IE 9]>.... some HTML here ....<![endif]-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>
      gulp-diffable-html
    </title>
  </head>
  <body>
    <header>
      <h1>
        <span>
          I am h1 in header
        </span>
      </h1>
    </header>
    <main>
      <p>
        <span> </span>
        <b>
          b
        </b>
        <strong>
          strong
        </strong>
        <em>
          &copy;
        </em>
      </p>
    </main>
    <footer>
      <p>
        <a
          href="https://github.com/ntnyq/gulp-diffable-html"
          target="_blank"
          rel="noopener"
        >
          gulp-diffable-html
        </a>
      </p>
    </footer>
  </body>
</html>

Options

gulp-diffable-html is based on diffable-html.

sortAttributes

  • type function
  • default (names) => names

Customize the order of attributes on HTML tag.

verbose

  • type boolean
  • default false

Display name of file from stream that is being formatting

Package Sidebar

Install

npm i gulp-diffable-html

Weekly Downloads

3

Version

3.0.0

License

MIT

Unpacked Size

10.5 kB

Total Files

7

Last publish

Collaborators

  • ntnyq