Skip to content

Latest commit

 

History

History
95 lines (67 loc) · 3.32 KB

README.md

File metadata and controls

95 lines (67 loc) · 3.32 KB

Compress HTML in Jekyll

Build Status

A Jekyll layout that compresses HTML. At a glance:

  • removes unnecessary whitespace;
  • removes optional end tags;
  • preserves whitespace within <pre>;
  • Github Pages compatible;
  • configurable affected elements;
  • automatically tested.

The layout is written in pure Liquid, no plugins are required.

The main reason for the compression is to fight the space between inline block elements. File size reduction is a welcome gain.

Installation

  1. Get the latest release. Extract compress.html and copy it to your _layouts.

  2. Reference the compress layout in your highest-level layout. For example in _layouts/default.html:

    

    3. 





layout: compress


{{ content }}

```

Now all your markup will be processed by the compress layout.


Configuration


By default the layout replaces contiguous whitespace with a single whitespace character. Additional settings can be specified in the compress_html key inside the _config.yml file:


compress_html:
  clippings: []
  endings: []


clippings


An array of elements to clip whitespace around them. The following elements may be safe to clip:



endings


An array of elements with optional end tags.


Full-blown sample


compress_html:
  clippings: [html, head, title, base, link, meta, style, body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, main, div, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th]
  endings: [html, head, body, li, dt, dd, p, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th]


Testing


Compatible Jekyll versions are:


    

  • 1.x.x
    • 

  • 2.x.x
    • 



Take a look at project’s test/source and test/expected directories. They contain self-explanatory specifications. Run rake to test the layout.


Restrictions ⚠️


    

  • Whitespaces inside of the textarea element are squeezed. Please don’t use the layout on pages with non-empty textarea.
    • 

  • Inline JS can become broken where // comments used. Please remove the comments or change to /**/ style.
    • 

  • Invalid markup can lead to unexpected results. Please make sure your markup is valid before.
    • 



Examples


Look how people use the layout on Github.