grunt-htmlclean

Simple and lightweight cleaner that just removes whitespaces, comments, etc. to minify HTML/SVG. This differs from others in that this removes whitespaces, line-breaks, etc. as much as possible.

grunt-htmlclean

This Grunt plugin is wrapper of htmlclean.

If you want to just clean files, Command Line Tool is easy way.

Simple and lightweight cleaner that just removes whitespaces, comments, etc. to minify HTML/SVG.
This differs from others in that this removes whitespaces, line-breaks, etc. as much as possible.

htmlclean removes the following texts.

  • The leading whitespaces, tabs and line-breaks, and the trailing whitespaces, tabs and line-breaks.
  • The unneeded whitespaces, tabs and line-breaks between HTML/SVG tags.
  • The more than two whitespaces, tabs and line-breaks (suppressed to one space).
  • HTML/SVG comments.

The more than two whitespaces (even if those are divided by HTML/SVG tags) in a line are suppressed.

Example:

Before

<p>The <strong> clean <span> <em> HTML is here. </em> </span> </strong> </p>

After

<p>The <strong>clean <span><em>HTML is here.</em></span></strong></p>

The whitespace that was right side of <strong> was removed, and the left side was kept.
The both side whitespaces of <em> were removed.

The following texts are protected (excluded from removing).

  • The texts in textarea, script and style elements, and text nodes in pre elements.
  • The quoted texts in tag attribute.
  • The texts in SSI tags (PHP, JSP, ASP/ASP.NET and Apache SSI).
  • IE conditional comments. e.g. <!--[if lt IE 7]>
  • The texts between <!--[htmlclean-protect]--> and <!--[/htmlclean-protect]-->.
  • The texts that is matched by protect option (see "Options").

See htmlclean.

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-htmlclean --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-htmlclean');

In your project's Gruntfile, add a section named htmlclean to the data object passed into grunt.initConfig().

grunt.initConfig({
  htmlclean: {
    options: {
      protect: /<\!--%fooTemplate\b.*?%-->/g,
      editfunction(html) { return html.replace(/\begg(s?)\b/ig, 'omelet$1'); }
    },
    deploy: {
      expand: true,
      cwd: 'develop/',
      src: '**/*.html',
      dest: 'public_html/'
    }
  }
});

See htmlclean for options and more information.

For example, you want to clean only changed HTML files. Then grunt-task-helper helps it. In this case, using handlerByContent Function instead of this plugin is better. Because grunt parses files components in every tasks(targets). handlerByContent can be included to one task with other handlers (e.g. select changed HTML files).
See grunt-task-helper.

Example:

Gruntfile.js

grunt.initConfig({
  taskHelper: {
    deploy: {
      options: {
        // Select files which are newer than `dest`. 
        handlerByFile: 'newFile',
        // Clean the selected files. 
        handlerByContent: require('grunt-htmlclean/node_modules/htmlclean')
        //handlerByContent: require('htmlclean') // If htmlclean is already installed. (Not grunt-htmlclean) 
      },
      expand: true,
      cwd: 'develop/',
      src: '**/*.html',
      dest: 'public_html/'
    }
  }
});