jonschlinkert/gulp-htmlmin

Minify HTML

gulp-htmlmin

gulp plugin to minify HTML.

Please consider following this project's author, Jon Schlinkert, and consider starring the project to show your ❤️ and support.

Install

Install with npm:

$ npm install --save gulp-htmlmin

Heads up!

Please do not report issues related to HTML parsing and output on this repository. Report those issues to the html-minifier issue tracker.

Usage

See the html-minifer docs for all available options.

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

gulp.task('minify', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'));
});

About

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Running Tests

Running and reviewing unit tests is a great way to get familiarized with a library and its API. You can install dependencies and run tests with the following command:

$ npm install && npm test

Building docs

(This project's readme.md is generated by verb, please don't edit the readme directly. Any changes to the readme must be made in the .verb.md readme template.)

To generate the readme, run the following command:

$ npm install -g verbose/verb#dev verb-generate-readme && verb

Contributors

Commits	Contributor
41	shinnn
20	jonschlinkert
11	doowb
7	stevelacy
2	TheDancingCode
1	cwonrails
1	igoradamenko
1	oblador
1	jdalton
1	JoseChirivella14
1	nschloe
1	tomByrer

Author

Jon Schlinkert

• GitHub Profile
• Twitter Profile
• LinkedIn Profile

Shinnosuke Watanabe

• GitHub Profile
• Twitter Profile
• LinkedIn Profile

License

Copyright © 2018, Shinnosuke Watanabe. Released under the MIT License.

---

This file was generated by verb-generate-readme, v0.6.0, on September 08, 2018.

gulp-htmlmin's Issues

There is whitespace between elements

<a href='#'></a>
<a href='#'></a>
<a href='#'></a>

Gives:
<a href='#'></a> <a href='#'></a> <a href='#'></a>
please consider replacing all > < gaps with just ><

Cannot read property 'gulp' of undefined when installing

When I run

npm i gulp-htmlmin --save-dev

I get

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i" "gulp-htmlmin" "--save-dev"
npm ERR! node v5.11.1
npm ERR! npm v3.8.6

npm ERR! Cannot read property 'gulp' of undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Apache24\htdocs\laravel\npm-debug.log

Even after deleting node_modules I get the same error.

Any help would be highly appreciated

Thanks

npm-debug.txt

Update for html minifier 2.0.0

Remove comments

Question:

Hi
The task works perfectly, all minified but the file keep the comments and i don't see a property like the

{collapseWhitespace: true}

There are something like:

{
collapseWhitespace: true,
removeComments: true
}

???
Thanks in advanced

Parse error on valid HTML with "<" character

The plugin is enable to parse valid HTML documents if their text contains <. For example:

<div> < back </div>

My gulp task:

gulp.task('build-html',function(){
    return gulp.src(appDev+'test.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(appProd));
});

Generates error:

Error: Parse Error: < back </div>
    at new HTMLParser (html-minifier\src\htmlparser.js:236:13)

gulp-htmlmin 2.0.0

Travis

Hey, I am about to submit a PR to remove the gulp tests and add examples.
Would you like to connect the repo to travis so I can add the travis file?

Thanks

document possible options in readme

or at least point to docs on them

can't work when src("src/**/*.html"),has not 'Finished' "version": "1.3.0",

A "typoed" comma in the html freezes the task

I had a typo in my html, a comma between attributes of an element, and gulp-htmlmin froze instead of throwing an error.

example:

<span class="class1 class2", id="id1"></span>

I was using gulp-htmlmin in conjunction with gulp-angular-templatecache and had no idea which of the dozens of html templates was causing the freeze. In fact, I did not even know what task was causing the freeze. If gulp-htmlmin had thrown an error stating that the html is not valid, and perhaps the name of the file where the error occurred, it would have saved me a lot of time.

I think this is a bug report, but otherwise consider it a feature request.

Bower support

Hi, any chance that we could have a Bower.json?

processConditionalComments bug

Hello!

"processConditionalComments: true" works fine for

<!--[if (gte mso 9)|(IE)]><table width="100%" align="center"><tr><td width="250"><![endif]-->

and for

`<!--[if (gte mso 9)|(IE)]>

`

but in this construction

`<!--[if (gte mso 9)|(IE)]>

`

I'm loosing all code between conditional comments.

Catched this bug in my email development framework https://github.com/dudeonthehorse/kilogram

Issue with Vue.js / `@` properties

Vue.js features event shorthand properties like so:

<!-- same as above -->
<input v-on:keyup.enter="submit">

<!-- also works for shorthand -->
<input @keyup.enter="submit">

This currently causes this gulp plugin to fail without any error output (making debugging this issue tricky and take forever).

Is it possible to allow exceptions / ignore invalid HTML / at least give an error etc.

Thanks.

child html tag moved from parent to sibling level

hi,

i just had an issue but only on windows 10 not on osx or ubuntu. When the file is minified,i have some custom html tags (i'm using angular) and those tags are moved.

Example, this :
<div> <translate>HELLO</translate> </div>
would turn to this :
<div> </div> <translate>HELLO</translate>

any idea why ?

Feature: Option to remove comments.

It would be great if there was an option to remove html comments i.e:
<!-- Header Start -->

However keeping the browser based comments like the one for IE8 i.e:
<!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->

not minifying correctly

In my project i have custom div like

<div><page:login:new:user></page:login:new:user></div>

And when I do minify, it is getting converted as
<div><page:login :new:user=""></page:login></div>

Any idea on how to solve this ?

gulp-htmlmin hangs...no errors

I just tried switching from gulp-minify-html to gulp-htmlmin. Gulp processing just hangs now. No errors or anything. Anyone have any suggestions?

quoteCharacter option not working

Trying to use single quotes, but I keep getting double quotes

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

gulp.task('templates', function() {
    var opts = {
        collapseWhitespace: true,
        quoteCharacter: "'"
    }
    return gulp.src('./src/templates/**/*.html')
        .pipe(htmlmin(opts))
        .pipe(gulp.dest('./dist/templates'));
});

improperly strips foreign element "/" closing characters by default

For foreign elements like SVG, (especially <stop> <polygon>, etc.) "/" characters are required to close the element (see: http://www.w3.org/TR/html5/syntax.html#start-tags #6). gulp-htmlmin strips them out by default, which results in invalid SVG that is not readable by the User Agent. Can be worked around by setting keepClosingSlash: true in options, but the default behavior does the "wrong thing" for embedded SVG (and I would assume other foreign elements like MathML as well.)

it looks like there is a build error on master, any way we can fix that?

because I cant get this module to work no matter what I do

gulp.task('html', function () {
  gulp.src('./public/template/page/main.html') //files.concat.html.main)
  .pipe(concat('index.html'))
    .pipe(htmlmin({
      removeComments: true,
      removeCommentsFromCDATA: true,
      collapseWhitespace: true,
      conservativeCollapse: true,
      lint: true,
      keepClosingSlash: false,
      caseSensitive: true,
      minifyJS: true,
      minifyCSS: true,
      processScripts: [
        'text/ng-template'
      ]
    }))
    .pipe(gulp.dest('./public'));
});

issue with php spaces

i had this issue which i posted on htmlmin and they fixed it a release a while ago but it's not fixed here
kangax/html-minifier#545

Error thrown on option tag

Hi,
When i use gulp-htmlmin on template containing twig element like <option {% if value=='1' %}selected="selected"{% endif %}>My Value</option> an error is thrown.
It's really strange, because if i remove it, and rerun gulp with other twig element in page everything works.

Any idea ?

Thanks for you help

Best Regards,

Pascall

Strange Parse error

i don't know what's the problem with this file but whenever i try to run htmlmin on it , it throw Parse error like this

$ gulp
[16:14:18] Using gulpfile /Volumes/Other/gulpfile.js
[16:14:18] Starting 'HTML'...
[16:14:18] Starting 'minifyjs'...
[16:14:18] Starting 'minifycss'...
[16:14:18] Starting 'copyimages'...
[16:14:18] Starting 'expetions'...
[16:14:18] Finished 'expetions' after 125 μs
[16:14:18] Starting 'phpmailer'...
[16:14:18] Finished 'phpmailer' after 1.42 ms

events.js:154
     throw er; // Unhandled 'error' event
     ^
Error: Parse Error: <a href"#">Support Application</a> exa </br>exaa </br>
<span><b>in Hardware</b></span> </br>
wweq
</h3>
<h2>DDD</h2>
<h3>AAA</h3>

<h2>WWW</h2>
<h3>Q,?. </br>
Whether it's a review, complain or advice We love chatting .
</br>You can <a href="//example.com/contacts">contact us</a> here.
</h3>

<h2 style="text-align:center">Hav <span id="ask" onclick="popup_mail();">Ask</span></h2>
</div>
<script type="text/javascript">
var forl=2;
function popup_mail(){
 $("head").append(' <link rel="stylesheet" href="/coaa.css">');
$.ajax({
type: "GET",
url: "/form"+ forl,
success:function (data) {
$.getScript('/jquery.popup.js', function(){
 var popup = new $.Popup({});
popup.open(data, 'html');

$.getScript('/caca.js', function(){});

});
}
});

}
</script>

   at new HTMLParser (/Volumes/Other/node_modules/html-minifier/src/htmlparser.js:236:13)
   at minify (/Volumes/Other/node_modules/html-minifier/src/htmlminifier.js:861:3)
   at Object.exports.minify (/Volumes/Other/node_modules/html-minifier/src/htmlminifier.js:1216:10)
   at objectAssign.fileName (/Volumes/Other/node_modules/gulp-htmlmin/index.js:22:39)
   at module.exports (/Volumes/Other/node_modules/tryit/tryit.js:8:9)
   at minifyHtml (/Volumes/Other/node_modules/gulp-htmlmin/index.js:21:9)
   at Transform.htmlminTransform [as _transform] (/Volumes/Other/node_modules/gulp-htmlmin/index.js:51:7)
   at Transform._read (/Volumes/Other/node_modules/gulp-htmlmin/node_modules/readable-stream/lib/_stream_transform.js:159:10)
   at Transform._write (/Volumes/Other/node_modules/gulp-htmlmin/node_modules/readable-stream/lib/_stream_transform.js:147:83)
   at doWrite (/Volumes/Other/node_modules/gulp-htmlmin/node_modules/readable-stream/lib/_stream_writable.js:319:64)

any thoughts

Parse error on Polymer

As gulp-minify-html is going to be deprecated, it led us here for a better option.

However, such error never encountered when using gulp-minify-html and gulp-htmlmin kept throwing erros on lines like this
<div id="mainContainer" flex?="{{mode !== 'cover'}}" on-scroll="{{scroll}}">

Module fsevents not compatible

Just for your information ...

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

I'am using:

• OS: Windows 10
• Node.js: v4.2.2
• NPM: v3.8.9

Bump version of html-minifier

To 0.8 please, thanks.

Update deps to v.1.3.0 of html-minifier

Hello!

Why are you not updating html-minifier version? I am getting errors in minified version with your plugin ('cause it depends on v.1.0.0). Please check this out: kangax/html-minifier#581

I've tried update to v.1.3.0 and run tests. All of them are passing.

`minifyJS: true` not working

Here is my gulpfile:

var gulp = require('gulp');

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

gulp.task('min', function() {
  gulp.src('./embed.html')
    .pipe(htmlmin({
      minifyJS: true,
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('./dist/'));
});

here is embed.html

<div onclick="thingEmbed.open()" class="thing-widget">
  <img src="thing.png" width="75" height="20">
</div>
<script type="text/javascript">
  var thingEmbed = (function() {
    return {
      open: function () {
        window.open(
          'https://thingurl',
          'thing',
          'resizable,scrollbars,status,width=500,height=300'
        );
      }
    }
  }());
</script>

here is the minified output:

<div onclick="thingEmbed.open()" class="thing-widget"><img src="thing.png" width="75" height="20"></div><script type="text/javascript">var thingEmbed = (function() {
    return {
      open: function () {
        window.open(
          'https://thingurl',
          'thing',
          'resizable,scrollbars,status,width=500,height=300'
        );
      }
    }
  }());</script>

What I expected: minified output should be one line and javascript should be collapsed

What I got: javascript retains whitespace

I have tried it also with uglify options passed through and it still does the same thing. Am I doing something wrong? Can you replicate this?

Feature Request: Show summary of saved file space.

After the minification is complete, gutil.log a summary of what was done.

Example output:
[12:08:44] Starting 'minifyHtml'...
[12:08:44] gulp-htmlmin: Minified 12 files (saved 18.2kb - 20%)
[12:08:44] Finished 'minifyHtml' after 297 ms

Publish new version to NPM

Could you please publish new version 1.3.0 to NPM.
The version of gulp-htmlmin on NPM is still 1.2.0.
Thanks very much!

htmlmin reordering elements.

I'm trying to minify something like this: <h1><span><div>test</div></span></h1> but instead it results in this: <h1><span></span><div>test</div></h1> (note how the div is now outside the span). It does this not only for div but also for some other elements (for example h1 and h2), but it doesn't reorder other inline elements such as <i>.

These are the options that I'm using:

var htmlMinOptions = {
    collapseWhitespace: true,
    customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
    customAttrAssign: [ /\)?\]?=/ ],
    caseSensitive: true
}

Double quote wraps url and async together

The double quote wraps around the async parameter as well as the url when using htmlmin.

Source:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" async></script> <script src="js/materialize.js" async></script>

Output:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js async"></script><script src="js/materialize.js async"></script>

html-minify errors not displayed correctly

I just ran it and got this response:

Error caught from html-minify: undefined.
Error caught from html-minify: undefined.
Error caught from html-minify: undefined.
Error caught from html-minify: undefined.

Not very helpfull. Is their a way to get some better information?

File not written, output is printed to stdout

Hi,

I'm using this plugin to minify a vulcanized HTML file. Here's my minify task :

gulp.task('minify', [ 'build' ], function() {
  return gulp
    .src('build/*.html')
    .pipe(minify({
      collapseInlineTagWhitespace: true,
      collapseWhitespace: true,
      keepClosingSlash: true,
      minifyCSS: true,
      minifyJS: true,
      removeComments: true,
      removeCommentsFromCDATA: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    }))
    .pipe(gulp.dest('build2/'))
    ;
});

However when I run the task, no build2/ directory is created, the result is printed to stdout. Another problem I have is that what is printed out is just the source HTML file, not minified. Why?

keepClosingSlash option does not work

I have the following input:

<input [id]="id"
    [name]="name"
    [ngClass]="class"
    [ngFormControl]="control"
    [placeholder]="placeholder"
    type="text"
    (blur)="onBlur(datepicker.value)"  />

And I get this output:

<input [id]="id" [name]="name" [ngclass]="class" [ngformcontrol]="control" [placeholder]="placeholder" type="text" (blur)="onBlur(datepicker.value)">

The trailing slash is gone and the produced output is not xhtml valid. This is a problem when using angular2 since it cannot parse the template.

This is the options object that I use:

{
            collapseWhitespace: 
            customAttrAssign: [/\)?\]?=/],
            customAttrSurround: [[/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/]],
            removeComments: true,
            removeTagWhitespace: true,
            keepClosingSlash: true
}

hangs when processing large number of files

var htmlmin = require("gulp-htmlmin");

gulp.task("release-html", function () {
return gulp.src("src/stardraw/company/pressreleases/*.html")
.pipe(htmlmin({ lint: false, collapseWhitespace: true, }))
.pipe(gulp.dest("wwwroot"));
});

This fails when we have 147 html files.
Only the first 30 odd files are converted - a different amount each time I run it - sometimes more, sometimes less.
I can individually htmlmin each html file successfully.
The gulp task just never ends.
If I comment out the pipe(htmlmin( line, all the files are copied over correctly.
It must therefore be an htmlmin problem.

My package.json file has:
"gulp-htmlmin": "1.3.0",

gulp-htmlmin & thymeleaf

okay? I would like to use the gulp-htmlmin to minify html in combination with thymeleaf and spring, but generates the following error:

org.xml.sax.SAXParseException: The type of link element "must be terminated by the matching end tag" </ link> ".

possibly some mistakes
I not found an option or other solution, any suggestions?

Gulp has no method 'folder'

I'm experiencing two issues when using the following code example:

var BASE_PATH       = "./";
var ASSETS_PATH     = BASE_PATH + "assets/"
var SCRIPTS_PATH    = ASSETS_PATH + "js/";
var CSS_PATH        = ASSETS_PATH + "css/";
var SASS_PATH       = ASSETS_PATH + "sass/";
var TEMPLATE_PATH   = ASSETS_PATH + "templates/";
var DEST_FOLDER     = BASE_PATH + "../webapp/assets/"

gulp.task('markup', function () {
  return gulp.src([ASSETS_PATH + '**/*.html', '!node_modules/**/*.html'])
    .pipe(htmlMin({collapseWhitespace: false}))
    .pipe(gulp.folder(DEST_FOLDER + 'index.html'));
});

• 1. Gulp has no method 'folder'
• 2. Even when trying to use gulp.dest instead of gulp.folder the index files never ends up in my DEST_Folder

TypeError in gulp-uglify in conjunction with gulp-htmlmin

Cross posted from gulp-uglify#101 since I think it might be a bug with gulp-htmlmin.
Please see gulp-uglify-htmlmin-bug to reproduce.

It might be due to sharing the uglify options object and perhaps it's being mutated by this library.

A problem about htmlminifier, but I think it is related with this.

I found a bug of htmlminifier.It is that specific abnormal HTML tag tastes htmlminifier very long time to process, when it does regex match using its htmlparser, but it will still return null .
What I care is that do you handle the null from ab abnormal html tag ? It is not good if a custom tag disappears from new file without an alert.

HTmlmin loops forever

The following typo localize" in the title in stead of localize created the loop
<pf-summary-block class="col-md-3 clickable"
title="{{'journals.new' | localize"}}"
value="journalEntries=(workCtrl.filtered.journals).length"
ng-click="workCtrl.openNewJournals({result: 'journals'})">

Is there an option to remove comments in the HTML?

Is there an option to remove comments in the HTML file?

Directories are treated as files. Error: EEXIST, mkdir for subfolders

Directories are treated as files. This causes an error " EEXIST, mkdir" when creating files in subdirectories.
Fix:
return es.map(function (file, cb) {
if(file.isNull()){ return cb(null, file); }

type-attribute with value "text" always removed | removeRedundantAttributes = true

  ...
  .pipe(htmlmin({
    collapseWhitespace: true,
    conservativeCollapse: true,
    removeComments: true,
    removeCommentsFromCDATA: true,
    removeCDATASectionsFromCDATA: true,
    removeRedundantAttributes: false
  }))
  ...

Input: <input id="username" name="username" placeholder="Username" type="text">
Output: <input id="username" name="username" placeholder="Username">

htmlmin linting

html-minifier says it includes linting. When using through gulp, e.g.,

var HTMLLint = require('./path/to/htmlminifier.js').HTMLLint;
var lint = new HTMLLint();
var htmlOpts = {
  collapseWhitespace: true,
  removeComments: true,
  lint: lint
};
[...]
.pipe(htmlmin(htmlOpts))
[...]

linting doesn't seem to be operational. Any hints here?

for loop throw parse error

Freeze with HTML element containing HTML comment

Normally I get an error if we have invalid HTML but in this case, our build task was freezing with no messaging.

Our task is

gulp.task('templates', function () {
    return gulp.src(config.templates)
      .pipe(htmlmin({
        removeComments: true,
        removeCommentsFromCDATA: true,
        removeCDATASectionsFromCDATA: true,
        collapseWhitespace: true,
        removeTagWhitespace: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }))
      .pipe(templateCache('templates.js', {
        module: 'app.templates'
      }))
      .pipe(gulp.dest(config.templatesDir));
  });

The offending HTML was

    <input class="form-control" type="text" style="" id="{{vm.formInputName}}" name="{{vm.formInputName}}"
           <!--FIXME hardcoded placeholder - dates may not be used for service required fields yet. -->
           placeholder="YYYY-MM-DD"
           date-range-picker
           data-ng-model="vm.value"
           data-ng-model-options="{ debounce: 1000 }"
           data-ng-pattern="vm.options.format"
           data-options="vm.datepickerOptions">

Note the HTML comment that was accidentally placed within the input element.

Spaces Left in Lodash Template

I'm using gulp-htmlmin to compress Lodash templates prior to precompilation. The minifier seems to be missing spaces that should be removed. This occurs in a few places but isn't entirely consistent.

It typically occurs in a couple places:

• after an HTML tag containing a template delimiter such as <input type="hidden" value="<%= data.value %>"> <input ...
• after a text node containing a template delimiter such as <div><%= data.text %> </div><div> ...

But in some cases it's also occurring after a tag with no delimiters (look for _METHOD below).

Am I missing a setting in my task? (Template task is disabled to study the htmlmin output.)

gulp.task('lodash', function() {
  return gulp.src('dev/js/jst/address.jst')
    .pipe(htmlmin({collapseWhitespace: true}))
    // .pipe(template.precompile())
    .pipe(rename('address.js'))
    .pipe(gulp.dest('dist/js'));
});

Here's a sampling -- if you need to see more, just let me know. Thanks for your help.

<li id="address-<%= data.address_id %>" class="l-addr--data -rel<%= primary %>" style="display: none"><p class="l-addr--address"><span class="-block"><%= data.fname %>&nbsp;<%= data.lname %>&#8203;</span> <span class="-block"><%= data.address1 %>&#8203;</span><% if (data.address2) { %> <span class="-block"><%= data.address2 %>&#8203;</span><% } %> <span class="-block"><span><%= data.city %>,&#32;</span> <span><%= data.state %>&#32;</span> <span><%= data.zip %>&#8203;</span></span><% if (data.phone) { %> <span class="-block"><%= data.phone %></span><% } %></p><div class="-group"><div class="l-addr--button"><form action="/address-book" method="post" novalidate><input type="hidden" name="_METHOD" value="PUT"> <input type="hidden" name="mode" value="edit"> <input type="hidden" ...

preserveLineBreaks option and <strong> elements: lineBreakStamp not being removed

if you minify following html file

<strong>lol</strong>
lol
<strong>lol</strong>

using options

{
  collapseWhitespace: true,
  preserveLineBreaks: true
}

you get

<strong>lol</strong>
lol[{htmlmin-lb}]<strong>lol</strong>

LoDash Template

Trying to minify a HTML file that has LoDash templating causes it to hang indefinitely.

Error when compressing

Hi, when trying to compressing with command gulp compress I get this error:

Thank you!