🍺 gulp plugin formatting html via diffable-html
npm install gulp-diffable-html -Dyarn add gulp-diffable-html -Dpnpm add gulp-diffable-html -Dconst 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)- zero-config
- indenting every level with 2 spaces
- align attributes
- put every opening and closing tag on its own line
- trimming text nodes
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>©</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>
©
</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>gulp-diffable-html is based on diffable-html.
-
type
function -
default
(names) => names
Customize the order of attributes on HTML tag.
-
type
boolean -
default
false
Display name of file from stream that is being formatting