gruntjs / grunt-contrib-htmlmin Goto Github PK

View Code? Open in Web Editor NEW

428.0 428.0 111.0 349 KB

Minify HTML.

Home Page: http://gruntjs.com/

License: MIT License

JavaScript 98.37% HTML 1.63%

grunt-contrib-htmlmin's People

Contributors

Stargazers

Watchers

grunt-contrib-htmlmin's Issues

Stops executing when one file fails

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"}} />

Update for compatibility with grunt 0.4.0rc5

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 comment for a description of the changes made.
grunt-contrib-jshint for an example using the this.filesSrc array.
grunt-contrib-concat for an example using the this.files array.

Notes:

A user may specify a new option 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:

Change this project's version number to one ending in "rc5" so that it's clearer that it works with grunt 0.4.0rc5. If the existing version number doesn't end in an "a" or "rc" increment the patch version. Eg, jshint went from 0.1.0 -> 0.1.1rc5
Ensure grunt 0.4.0rc5-compatible plugins are specified in package.json devDependencies like this (grunt-contrib-internal can be "*")
Update the CHANGELOG like this
Regenerate the README.md file via grunt.
Delete node_modules, run npm cache clean and re-run npm install to test.
Publish to npm using --tag=master (not latest)

Optionally minify inside of <script> tags?

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?

It crashes when html element contains non-html text

The library does not compress this:

    <ul id="menu">
        <li {{#if showHome }}class="active"{{/if}}><a href="#home">Home</a></li>
        <li {{#if showAbout }}class="active"{{/if}}><a href="#about">About</a></li>
    </ul>

It shows me an error:
Warning: Cannot read property 'length' of undefined Used --force, continuing.

Moves closing </a> tag

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>

Should update srcs and hrefs after minifying

I have a file at ./index.html that I minify to ./dist/index.html, but references to CSS and JS are not preserved.

oposite results than expected

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..

Example configuration contains syntax errors

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'
}

collapseWhitespace can drop spaces between words

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>

The sequence [']["] transformed wrong.

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.

Destination not written because minified HTML was empty.

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?

How can use two task with different options ?

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 ?

div in span

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.

Htmlmin stucks when there is handlebars condition inside the element

<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.

Angular JS templates are not minified

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 should i do if i want to minify css(script) and js(style) in html？

what should i do if i want to minify cssandjs in html？

I wanna use it with smarty templete, May I define something to get it

can you help me

Cannot read property 'length' of undefined

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

Handlebars support

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?

Multiple files in a row

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 !

Please update

... to the latest version of html-minifier. It has proper handling of the end part of valid IE revealed conditional comments (). Thanks! :)

No Minification - Empty Task

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.

Gruntfile.js do not run jshint task

Title speaks for itself. Also order of test tasks is in reverse.

htmlmin removing whitespace from text nodes

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.

Parse Error when minifying html that has a custom tags

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?

htmlmin stalls on error in html

I had this obvious typo in my code:

<table class="contentTable"">

The result was a stall. A proper exception message would have been nice.

aborted when using with usemin in IE conditionnal commenter

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.

Breaks Bootstrap 3.0 Input Groups

Using the Yeoman defaults (which appear to be this plugins defaults), on any Angular view, it will break an input group by moving a button out of a span.

Before htmlmin:

After htmlmin:

Work around for now is to bypass this phase for views, but would be nice if it didn't do this.

<source> tags within <audio> tag are not recognized as self-closing

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>

Minification not working at all?

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>

The sequence of empty non-HTML-tags transformed wrong.

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.

Not working for nested directories

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.

Update html-minifier to 0.5.0

Current version of html-minifier 0.4.5 has bug when parsing start tag with dash, e.g

Add option to specify src directory instead of a set of predefined src files

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.

collapseWhitespace needs another option

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/

Push to npm

It'd be nice to have this available in on npmjs.org with the rest of the contrib tasks. :)

htmlmin stalls on .ejs files

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.

removeRedundantAttributes: true delete type attribute of <input type="text" .../> , cause some problem

if in my css file, I write one rule:
input[type="text"] {
/* do something */
}
things go wrong here !

Proccesing multiple files

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

Is there a wildcard option?

Hi,
can I just include whole folders instead of every single file? Like doing src: ['*html']?

htmlmin produces invalid inline SVG

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?

Possible improvement - Use comment block to ignore a block of html

Would it be possible to ignore a section of an html doc by surrounding that section with a specific comment like ?

Fails silently

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.

htmlmin hangs with no diagnostic if you have }> in your html

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

htmlmin outputs invalid html when tags have '-' or ':'

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.

<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.

removeComments: true bug?

Running:

htmlmin: {
    group: {
        options: {
            removeComments: false
        },
        ...
    }
}

<!--[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 . Should it be?

gruntjs / grunt-contrib-htmlmin Goto Github PK

grunt-contrib-htmlmin's People

Contributors

Stargazers

Watchers

Forkers

grunt-contrib-htmlmin's Issues

Recommend Projects

Recommend Topics

Recommend Org