collapseWhitespace in htmlmin task makes usemin destroy the html #44

sindresorhus · 2013-02-11T17:17:42Z

collapseWhitespace: true in the grunt-contrib-htmlmin makes usemin destroy most of the html.

The resulting index.html from generator-webapp becomes:

<script src="scripts/vendor/modernizr.js"></script>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]--><!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --><script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            <script src="scripts/plugins.js"></script>

The text was updated successfully, but these errors were encountered:

sleeper · 2013-02-11T17:19:50Z

Well, now it's compact ;)
Is there a way to have a view on the output from htmlmin (i.e. the output html) ?

sindresorhus · 2013-02-11T17:22:07Z

Output form htmlmin:

<!DOCTYPE html>
<!--[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]-->
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
        <title></title>
        <meta name=description content="">
        <meta name=viewport content="width=device-width">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel=stylesheet href="styles/main.css">
        <!-- build:js scripts/vendor/modernizr.js -->
        <script src="components/modernizr/modernizr.js"></script>
        <!-- endbuild -->

    <body>
        <div class=container style=margin-top:50px>
            <div class=hero-unit>
                <h1>'Allo, 'Allo!</h1>
                <p>You now have</p>
                <ul>
                    <li>HTML5 Boilerplate</li>
                    <li>Twitter Bootstrap</li>
                    <li>RequireJS</li>
                </ul>
                <p>installed.</p>
                <h3>Enjoy coding! - Yeoman</h3>
            </div>
        </div>

        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>

        <!-- build:js scripts/plugins.js -->
        <script src="components/sass-bootstrap/js/bootstrap-affix.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-alert.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-modal.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-transition.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-button.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-popover.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-carousel.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-collapse.js"></script>
        <script src="components/sass-bootstrap/js/bootstrap-tab.js"></script>
        <!-- endbuild -->

        <!-- build:js scripts/amd-app.js -->
        <script data-main="scripts/main" src="components/requirejs/require.js"></script>
        <!-- endbuild -->

btford · 2013-02-25T04:57:30Z

Would love for this to be fixed. :)

artuska · 2013-04-15T22:41:35Z

The same problem — usemin does not work after the htmlmin, it just ruins all my HTML code completely. So, usemin understands this:

<!-- build:js js/scripts.js -->
    <script src="js/common.js"></script>
    <script src="js/main.js"></script>
<!-- endbuild -->

but not this (after htmlmin processing — same as above, just compressed in one line):

<!-- build:js js/scripts.js --><script src="js/common.js"></script><script src="js/main.js"></script><!-- endbuild -->

iham · 2013-05-04T09:56:49Z

I did some kind of a workaround by splitting htmlmin into two targets.
the first will do all the magic except collapseWhitespace to destination 'dist'.
the second will override the html in 'dist'.

    htmlmin: {
      dist: {
        options: {
          removeComments: true,
          // removeCommentsFromCDATA: true,
          // removeCDATASectionsFromCDATA: true,
          // https://github.com/yeoman/grunt-usemin/issues/44
          // collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeAttributeQuotes: true,
          removeRedundantAttributes: true,
          // useShortDoctype: true,
          removeEmptyAttributes: true,
          // removeOptionalTags: true,
          // removeEmptyElements: true,
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: '{,*/}*.html',
          dest: '<%= yeoman.dist %>'
        }]
      },
      deploy: {
        options: {
          collapseWhitespace: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: '{,*/}*.html',
          dest: '<%= yeoman.dist %>'
        }]
      }
    }

register your build task like

  grunt.registerTask('build', [
    // put all the other tasks you want to use before htmlmin and usemin
    'htmlmin:dist',
    'usemin',
    'htmlmin:deploy'
  ]);

i've used grunt-rev too and it worked well for me ;)

hope this helps.

robwierzbowski · 2013-05-16T17:39:17Z

Why not just run all of htmlmin last? It's safest to do any sort of regex manipulation with a well formed document, so it seems like a better idea to perform manipulations and then minify.

I've been running it this way with no issues.

AdrienGiboire · 2013-06-06T14:15:06Z

@robwierzbowski Did you try and see it working your way?

robwierzbowski · 2013-06-06T14:50:19Z

Yep, that's how it's being run in generator-jekyllrb: https://github.com/robwierzbowski/generator-jekyllrb/blob/37223004b8af22bf4f90430d39f74f603c4b22c4/app/templates/Gruntfile.js#L462-L477

rzschech · 2013-06-10T13:48:52Z

Running htmlmin last as @robwierzbowski suggests works for me.

mgol · 2013-06-25T12:28:27Z

Thanks, @iham, your solution works great!

qcgm1978 · 2013-11-08T09:43:54Z

@iham thanks a lot, you solve my problem and let me understand more what usemin does.

fernandoacorreia · 2013-12-10T14:14:42Z

I confirm @iham's solution worked for me as well. I suggest it is the default for the webapp generator.

@iham

This patch fix this issue yeoman/grunt-usemin#44 using @iham's solution: yeoman/grunt-usemin#44 (comment)

stephanebachelier · 2015-02-23T23:42:56Z

Would be fixed when #244 shipped. But as said by @robwierzbowski it's safest to do html minification last

emaxerrno mentioned this issue Feb 18, 2013

Not working for nested directories gruntjs/grunt-contrib-htmlmin#8

Closed

mhamel06 mentioned this issue Mar 18, 2013

Yo angular app created with camel case in index but not in app.js yeoman/yeoman#988

Closed

ghost assigned sleeper Apr 29, 2013

kpgarrod mentioned this issue May 3, 2013

Page is blank after creating a new project yeoman/generator-angular#198

Closed

lucabelluccini mentioned this issue May 9, 2013

Bootstrapping an angular project, bower and grunt got reinstalled locally yeoman/yeoman#1048

Closed

nullbio mentioned this issue Jun 24, 2013

Grunt weird error message gruntjs/grunt#824

Closed

xml mentioned this issue Jul 1, 2013

grunt test & grunt server are using the same port yeoman/yeoman#1118

Closed

nuweb mentioned this issue Jul 18, 2013

Warning: Task "compass:server" failed. Use --force to continue. yeoman/yeoman#1132

Closed

iamdustan mentioned this issue Aug 7, 2013

Insufficient linefeed detection #88

Open

iangregsondev mentioned this issue Aug 28, 2013

Fontawesome using gruntfile with server:dist causes errors, Fonts not available ? yeoman/generator-angular#350

Closed

robwierzbowski mentioned this issue Sep 7, 2013

grunt-modernizr is really slow yeoman/generator-webapp_DEPRECATED#150

Closed

gorkamolero mentioned this issue Oct 30, 2013

Generator error 'templating' Gruntfile: 'connect is not defined' yeoman/yeoman#1213

Closed

sindresorhus mentioned this issue Nov 6, 2013

Badly mangles html (v2.0.0) #203

Closed

lcotonea mentioned this issue Dec 3, 2013

Warning: EACCES, permission denied '/lost+found' dsimard/generator-angular-phonegap#7

Closed

IxDay added a commit to RulzUrLife/RulzUrFront that referenced this issue Dec 27, 2013

Fix an issue of htmlmin

b467b3d

This patch fix this issue yeoman/grunt-usemin#44 using @iham's solution: yeoman/grunt-usemin#44 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

collapseWhitespace in htmlmin task makes usemin destroy the html #44

collapseWhitespace in htmlmin task makes usemin destroy the html #44

sindresorhus commented Feb 11, 2013

sleeper commented Feb 11, 2013

sindresorhus commented Feb 11, 2013

btford commented Feb 25, 2013

artuska commented Apr 15, 2013

iham commented May 4, 2013

robwierzbowski commented May 16, 2013

AdrienGiboire commented Jun 6, 2013

robwierzbowski commented Jun 6, 2013

rzschech commented Jun 10, 2013

mgol commented Jun 25, 2013

qcgm1978 commented Nov 8, 2013

fernandoacorreia commented Dec 10, 2013

stephanebachelier commented Feb 23, 2015