gruntjs / grunt-contrib-htmlmin Goto Github PK
View Code? Open in Web Editor NEWMinify HTML.
Home Page: http://gruntjs.com/
License: MIT License
Minify HTML.
Home Page: http://gruntjs.com/
License: MIT License
Hey all,
Great plugin. However, I'm using this for a web application that has a ton of mustache templates in script tags -- which are not being minified in the collapse Whitespace rule.
Is there an optional parameter to make this happen? The reason I ask is that my benchmarks get much lower if I minify all of the whitespace (using http://www.willpeavy.com/minifier/, or something of the sort). Here are my marks:
Normal : 31.7kb
grunt-contrib-html (with all options set to true): 29.2 kb
white space minification: 21.6 kb
I would love to utilize the rest of the tools in this as well, but the whitespace in script tag blocker is holding my back by around 8 kbs. Is it possible to turn that off?
I am using HTMLmin in my grunt.js workflow to minify my HTML.
I have a few files that also include PHP markup. For example:
<a href="<?php echo //code ?>">link</a>
HTMLmin doesn't parse this correctly, and instead throughs an exception error:
Warning: [filename]
Parse Error: <a href="<?php echo //code ?>">link</a>
Aborted due to warnings.
Is there anyway to instruct HTMLmin to ignore PHP markup? I've looked through the docs but don't see any obvious answer.
The sequence:
<some-tag-1></some-tag-1>
<some-tag-2></some-tag-2>
transformed to:
<some-tag-1><some-tag-2></some-tag-2></some-tag-1>. The minifying should keep original sequence. As workaround I should wrap each group by <div>-tags.
It seems there aren't any options about compressing js in script tags and specify the js compressor for script tags.
I need to have twi task with different options.
for example
grunt.initConfig({
htmlmin_1: {
dist: {
options: {
},
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
},
dev: {
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
}
},
htmlmin_2: {
dist: {
options: {
removeComments: true,
removeCommentsFromCDATA: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
},
dev: {
files: {
'dist/index.html': 'src/index.html',
'dist/contact.html': 'src/contact.html'
}
}
}
});
How can do this ?
login.html has password tag which needs to focused when there is an error.
<input type="password" class="required input-block-level" placeholder="Password" name="password" value="{{password}}" maxlength="70" required
{{#if error}}autofocus="autofocus" {{/if}} >
The htmlmin hangs when processing this html file.
I am seeing that whenever I perform html min on text nodes, say:
No <span>items</span> selected
it converts that to:
No<span>items</span>selected
My expected result in those cases is for it to remove redundant whitespace, not eliminate it completely.
How is it possible that this
<html>
<head></head>
<body>
<span>as</span> <span>fd</span>
</body>
</html>
turns into this
<html><head></head><body><span>as</span> <span>fd</span></body></html>
using this setting
htmlmin: {
options: {
collapseWhitespace: true
},
dist: {
files: {
'test2.html': '_test.html'
}
}
}
so it removed whitespace everywhere but where I wanted it to, which is in between those spans..
htmlmin will refuse to work when using usemin in IE conditionnal commenter.
here's the code in html file:
<!--[if lt IE 9]>
<!-- build:js scripts/test.js -->
<script src="js/test.js"></script>
<!-- endbuild -->
<![endif]-->
About gruntfile , normal htmlmin configuration and usemin configuration.
Warning message
Warning: Running "htmlmin:dist"(htmlmin) task
Warning: app/index.html
Parse Error: <![endif]-->
I think I will just copy html file instead(which will not cause any problem) instead before getting good solution for this issue.
Hope you can fix this or give some advise.
I need someone to help update this plugin to work with grunt 0.4.0rc5.
I had to revert the whole file src-dest mappings implicit iteration abstraction per gruntjs/grunt#606, and once again, multi tasks have to iterate over this.files
manually. In addition, there's a new this.filesSrc
array that contains a reduced, uniqued set of all matched src
files in case the task is read-only and only cares about source files.
See:
this.filesSrc
array.this.files
array.Notes:
nonull
in addition to src
to tell grunt to keep patterns or filepaths that don't actually match files. Because of this, the task shouldn't explode if a nonexistent src
filepath is encountered. I handle this in the grunt-contrib-concat by warning if not grunt.file.exists
but not failing the task.Guidelines for updating / publishing this plugin:
"*"
)README.md
file via grunt.node_modules
, run npm cache clean
and re-run npm install
to test.--tag=master
(not latest
)I have an HTML file with structure like this:
<div>
...Some markup..
</div>
<script type="text/ng-template" id="template1.html">
...HTML of template1...
</script>
<script type="text/ng-template" id="template2.html">
...HTML of template2...
</script>
With this Grunt configuration:
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [
{
expand: true,
src: 'public/views/**/*.html'
}
]
}
}
The script tag content doesn't seems as minified. Any suggestions?
P.S. The same template mechanism is also used in several frameworks and libs (Knockout, Kendo).
what's wrong with this template? I've isolated the twig sintax that trow this error:
<li {% if 'doctrine' == active %}class="active"{% endif %}><a href="{{ path('doctrine') }}">Doctrine</a></li>[/code]
I get a a Warning: Cannot read property 'length' of undefined
htmlmin: {
dist: {
options: {
removeCommentsFromCDATA: true,
removeComments: true,
// https://github.com/yeoman/grunt-usemin/issues/44
//collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
// Cannot remove empty elements with angular directives
removeEmptyElements: false
},
files: [{
expand: true,
dot: false,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>/styles/',
src: ['*.html','views/*.html','views/directives/*.html',]
}]
}
},
none of the doubly nested directories get copied. That is to say, views/directives/.html. I've tried doing */.html, views/__/.html, views/, views//.
I've also made sure that the directory indeed exists.
As a matter of fact I've gotten around this issue by adding the files on the 'copy' task, but off course they don't get minified.
I had a curly brace slip outside the quotes and cause htmlmin to go into some kind of inifinte loop.
The line it hung on looked like this:
See the last 2 characters on the line
Running:
htmlmin: {
group: {
options: {
removeComments: false
},
...
}
}
On
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Removes the last <!--<![endif]-->
. Should it be?
Before htmlmin: (Although div should not be used in span it is still a valid html code.)
<span>
<div>hh</div>
</span>
After htmlmin
<span>
</span><div>hh</div>
span is no more the parent tag of div.
Hi.
Sorting out plugin I failed to find a way to specify src directory as a config option (alike in 'contrib-copy' plugin). Here is sample config code snippet of what i think would be nice to have as an option:
dist : {
options: {
removeComments: true,
collapseWhitespace: true
},
filse: {
src: ['app/*/.html],
dest: ['build/']
}
}
Do not rule out I've missed something.
Thanks in advance.
Attempting to minify html with <%= var_name %> tags resulted in a stall. Could the code be refactored to skip areas of the html with <% %> tags?
I've read a number of questions where people have been asking for a workaround.
Hi,
can I just include whole folders instead of every single file? Like doing src: ['*html']?
It'd be nice to have this available in on npmjs.org with the rest of the contrib tasks. :)
turns
<a href="/../../">
<div class="workIntro">
<div class="workTitleBorder">
<h2>Title</h2>
</div>
<h3>Another title</h3>
</div>
</a>
into
<a href="/../../">
</a><div class="workIntro">
<div class="workTitleBorder">
<h2>Title</h2>
</div>
<h3>Another title</h3>
</div>
anything i do... there comes the message.
when i use src:{} and dest:{}, everything works fine. But i want to create multifile output and then i have to use files:{}
What can i do?
If html is like this:
<!doctype html>
...
<ng:include src="xxx" />
the output is:
<!doctype html>
...
<ng -include="" src="xxx">
So my angular webapp doesn't work. The problem is in html-minifier. The startTag regular expression seems wrong.
... to the latest version of html-minifier. It has proper handling of the end part of valid IE revealed conditional comments (<!--<![endif]-->
). Thanks! :)
Hi,
I would like to say thank you for making this amazing task for Grunt.
I have a project that use angular where I have created some custom tags, look like:
<project.user.info></project.user.info>
Unfortunately, it break the minifying process.
I know it is not a standard HTML standard with such custom tag, but I would like to see if the grunt-contrib-htmlmin would take that as one of the acceptable cases?
if in my css file, I write one rule:
input[type="text"] {
/* do something */
}
things go wrong here !
I had this obvious typo in my code:
<table class="contentTable"">
The result was a stall. A proper exception message would have been nice.
If I set the option "removeEmptyElements: true" all <script src="example.js"></script> get removed.
The script element should be an exception.
Hi,
Please take a look to the configuration example. There is comma missing in files declaration.
files: { // Dictionary of files
'dist/index.html': 'src/index.html' // 'destination': 'source'
'dist/contact.html': 'src/contact.html'
}
I was just noticing that most of my files were not copied and minified anymore.
I investigated ...
... and found that one of my files was (still) using the Handlebars syntax:
<button {{action "click"}} />
When the plugin tried to minify the file it failed and just did not continue to process the others.
This should be fixed.
what should i do if i want to minify cssandjs in html?
I have a file at ./index.html that I minify to ./dist/index.html, but references to CSS and JS are not preserved.
I am using the following task configuration to try to get minification working:
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'build/src/index.html': 'src/index.html' // 'destination': 'source'
}
},
I am attempting to minify an html skeleton file which contains some angularJS directives, scripts, links, nothing else. I've even removed the angularJS directives with no change in behavior.
Basically, this is the best way to describe the behavior (nothing):
Running "uglify:dist" (uglify) task
File "build/scripts/main.min.js" created.
Running "htmlmin:files" (htmlmin) task
Running "cssmin:compress" (cssmin) task
File build/styles/main.min.css created.
Hi,
I tried to use this plugin to minify bunch of separate files (using wildcard /*/.html) and I expected to get same number of separate files in destination directory (output/), but minified of course. Looks like it cant create multiple separate files as an output.
Do you plan to support this? It is very useful when used in a workflow before using grunt-angular-templates to generate templates as javascript file, it needs separate files as input to create proper functions one per each file.
Thank you for plugin anyway.
Zdenek
An option to prevent singleton tags with a slash from being mangled called keepClosingSlash
has been added to html-minifier. kangax/html-minifier#122
We should add support for this asap since it results in invalid output from things like inline SVGs. See #19
Current version of html-minifier 0.4.5 has bug when parsing start tag with dash, e.g
A code block like this:
<audio controls="controls">
<source src="foo.wav" >
<source src="far.wav" >
<source src="foobar.wav" >
</audio>
will minify to this:
<audio controls="controls">
<source src="foo.wav" >
<source src="far.wav" >
<source src="foobar.wav" ></source></source></source>
</audio>
I need to reduce the size of the HTML without changing the appearance of the rendered pages. There should be a collapseWhitespace option or some other configuration that allows for this. An option that reduces continuous blocks of white space to one space character would achieve this. Just like: https://code.google.com/p/htmlcompressor/
When 1 of X files fails to be minified, the plugin does not print an error message and skips to process all following files.
So it seems the plugin iterates over the files:
this.files.forEach(function (file) {
...
var min = minify(max, options);
Apparently the call to minify
fails. Maybe this should be wrapped inside a try/catch
?
PS: a failing file can look like this:
<button {{action "click"}} />
Say I have an Ember application with a whole lot of handlebars templates (which I do). Would I be able to minify those using htmlmin without breaking anything?
hi guys, it possible to do something like this ??
i want to minify multiple files in a row, with de following rule doesnt work ...
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
src: 'build/**/*.html'
}
}
but with this yup,
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [
{expand: true, cwd: 'build', src: ['**/*.html'], dest: 'build/'},
]
}
}
destination must be required ??
thks !
The library does not compress this:
It shows me an error:
Warning: Cannot read property 'length' of undefined Used --force, continuing.
For example:
<p>
[tab]line1
[tab]line2
</p>
(where [tab] is an actual tab and there are no whitespace characters at line ends) will end up as
<p>line1line2</p>
Hi,
I'm using Grunt 0.4.0rc2.
Below is part of my Grunt file where I'm specifying options for my HTML optimisation + part of my HTML page.
When I run grunt htmlmin
the command feeds back...
$ grunt htmlmin
Running "htmlmin:dist" (htmlmin) task
File ./index-min.html created.
Uncompressed size: 909 bytes.
Compressed size: 277 bytes gzipped (407 bytes minified).
Running "htmlmin:dev" (htmlmin) task
File ./index-min.html created.
Uncompressed size: 909 bytes.
Compressed size: 452 bytes gzipped (909 bytes minified).
Done, without errors.
but when I check the output in the file index-min.html
there is no difference at all. No white space removed, comments are still in the HTML, the redundant attributes are left in place - literally nothing different?
Any light you can shed on this issue please would be great.
Thanks.
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true,
removeCommentsFromCDATA: true,
removeRedundantAttributes: true,
collapseBooleanAttributes: true,
},
files: {
'./index-min.html': './index.html'
}
},
dev: {
files: {
'./index-min.html': './index.html'
}
}
}
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grunt.js Testing</title>
<link rel="stylesheet" href="app/styles/main.css">
</head>
<body>
<p>
This is a paragraph of text
</p>
<p>
<img src="app/images/test.jpg">
</p>
<script data-main="app/release/main" src="lib/require.js" type="text/javascript"></script>
</body>
</html>
This is the original SVG in my HTML:
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<rect width="20" height="3" y="2" fill="#fff"/>
<rect width="20" height="3" y="8.5" fill="#fff"/>
<rect width="20" height="3" y="15" fill="#fff"/>
</svg>
</body>
And here is the result after htmlmin:
<body>
<svg xmlns="http://www.w3.org/2000/svg" width=20 height=20>
<rect width=20 height=3 y=2 fill="#fff">
<rect width=20 height=3 y=8.5 fill="#fff">
<rect width=20 height=3 y=15 fill="#fff">
</svg>
The SVG will not display properly any more (only the first rect is displayed). If I add ending slashes in the rect elements, it will display property, but it's still not valid SVG.
So maybe htmlmin should not removeAttributeQuotes and slashes at least or generally not minimize inline SVGs at all?
Also, is there an option to disable the removal of the slashes? Or I'll have to not use htmlmin all all?
Would it be possible to ignore a section of an html doc by surrounding that section with a specific comment like <!-- htmlmin:ignore -->
?
Title speaks for itself. Also order of test tasks is in reverse.
The sequence [']["](of course without brackets [] - I've added brackets only to separate chars) transformed wrong. After the minifying it looks as ["][]["]. I hope it shouldn't be changed.
can you help me
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.