Gulp Minify HTML

Gulp Minify HTML

To Minify html files via gulp first install gulp & gulp-htmlmin module with following command

npm i gulp --save
npm i gulp-htmlmin --save

Now in your gulp file require modules

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');

Create following task for minify html

gulp.task('minifyHTML', function(){
    return gulp.src('index.html')
    .pipe(htmlmin({collapseWhitespace: true, minifyJS:true,removeComments:true}))
    .pipe(gulp.dest('./'));
});

you can pass following options to minify html.

Option Default Description
caseSensitive false Treat attributes in case sensitive manner (useful for custom HTML tags)
collapseBooleanAttributes false Omit attribute values from boolean attributes
collapseInlineTagWhitespace false Don’t leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true
collapseWhitespace false Collapse white space that contributes to text nodes in a document tree
conservativeCollapse false Always collapse to 1 space (never remove it entirely). Must be used in conjunction with collapseWhitespace=true
customAttrAssign [] Arrays of regex’es that allow to support custom attribute assign expressions (e.g. ‘

‘)

customAttrCollapse Regex that specifies custom attribute to strip newlines from (e.g. /ng-class/)
customAttrSurround [] Arrays of regex’es that allow to support custom attribute surround expressions (e.g. )
customEventAttributes [ /^on[a-z]{3,}$/ ] Arrays of regex’es that allow to support custom event attributes for minifyJS (e.g. ng-click)
decodeEntities false Use direct Unicode characters whenever possible
html5 true Parse input according to HTML5 specifications
ignoreCustomComments [ /^!/ ] Array of regex’es that allow to ignore certain comments, when matched
ignoreCustomFragments [ /<%[\s\S]*?%>/, /<\?[\s\S]*?\?>/ ] Array of regex’es that allow to ignore certain fragments, when matched (e.g. , {{ … }}, etc.)
includeAutoGeneratedTags true Insert tags generated by HTML parser
keepClosingSlash false Keep the trailing slash on singleton elements
maxLineLength Specify a maximum line length. Compressed output will be split by newlines at valid HTML split-points
minifyCSS false (could be true, Object, Function(text)) Minify CSS in style elements and style attributes (uses clean-css)
minifyJS false (could be true, Object, Function(text, inline)) Minify JavaScript in script elements and event attributes (uses UglifyJS)
minifyURLs false (could be String, Object, Function(text)) Minify URLs in various attributes (uses relateurl)
preserveLineBreaks false Always collapse to 1 line break (never remove it entirely) when whitespace between tags include a line break. Must be used in conjunction with collapseWhitespace=true
preventAttributesEscaping false Prevents the escaping of the values of attributes
processConditionalComments false Process contents of conditional comments through minifier
processScripts [] Array of strings corresponding to types of script elements to process through minifier (e.g. text/ng-template, text/x-handlebars-template, etc.)
quoteCharacter Type of quote to use for attribute values (‘ or “)
removeAttributeQuotes false Remove quotes around attributes when possible
removeComments false Strip HTML comments
removeEmptyAttributes false Remove all attributes with whitespace-only values
removeEmptyElements false Remove all elements with empty contents
removeOptionalTags false Remove optional tags
removeRedundantAttributes false Remove attributes when value matches default.
removeScriptTypeAttributes false Remove type=”text/javascript” from script tags. Other type attribute values are left intact
removeStyleLinkTypeAttributes false Remove type=”text/css” from style and link tags. Other type attribute values are left intact
removeTagWhitespace false Remove space between attributes whenever possible. Note that this will result in invalid HTML!
sortAttributes false Sort attributes by frequency
sortClassName false Sort style classes by frequency
useShortDoctype false Replaces the doctype with the short (HTML5) doctype