You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
jekyll-compress-html/site/index.md

6.3 KiB

title layout prefetch
Compress HTML in Jekyll default https://github.com/penibelst/jekyll-compress-html

A Jekyll layout that compresses HTML. At a glance:

  • removes unnecessary whitespace;
  • removes optional end tags;
  • removes optional start tags;
  • removes comments;
  • preserves whitespace within <pre>;
  • GitHub Pages compatible;
  • ignores development environments;
  • configurable affected elements;
  • profile mode;
  • automatically tested.

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

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:
---
layout: compress
---

<html>
{% raw %}{{ content }}{% endraw %}
</html>

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. The default configuration is:

compress_html:
  clippings: []
  comments: []
  endings: []
  ignore:
    envs: []
  blanklines: false
  profile: false
  startings: []

clippings

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

Example:

compress_html:
  clippings: [div, p, ul, td, h1, h2]

Use the shortcut all to clip all safe elements.

compress_html:
  clippings: all

comments

An array of exactly two comment tags to strip comments enclosed by them. The first string must be the start tag, the second must be the end tag. Example:

compress_html:
  comments: ["<!-- ", " -->"]

Whitespaces around the tags prevent conditional comments from being deleted.

Use the shortcut all to remove all comments.

endings

An array of elements with optional end tags. These end tags will be removed.

Example:

compress_html:
  endings: [p, li, td]

Use the shortcut all to remove all optional endings.

compress_html:
  endings: all

startings

An array of elements with optional start tags. These start tags will be removed.

Example:

compress_html:
  startings: [html, head, body]

profile

A boolean value to turn on the profile mode. If true, the layout creates a HTML table after the compressed content. The table contains the file size in bytes during the compressing steps.

compress_html:
  profile: true

The profile table provides attributes for styling and reading. The id ends with build’s timestamp to be unique enough.

<table
  id="compress_html_profile_YYYYMMDD"
  class="compress_html_profile"
>

This page itself is compressed in profile mode for educational purposes only. The [table](#compress_html_profile_{{ site.time | date: "%Y%m%d" }}) is below. Please don’t profile in public.

ignore.envs

An array of environments given by ENV["JEKYLL_ENV"] where the compress layout is ignored. This may be useful while developing a website.

Use the shortcut all to disable compression in all environments.

blanklines

A boolean value to turn on blanklines mode. This mode will only remove lines consisting of whitespace and leave other lines alone.

compress_html:
  blanklines: true

Full-blown sample

compress_html:
  clippings: all
  comments: ["<!-- ", " -->"]
  endings: all
  ignore:
    envs: [local]
  blanklines: false
  profile: true
  startings: [html, head, body]

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

This page itself is compressed by the layout. It’s hosted by GitHub in the gh-pages branch.

Look how others use the layout on GitHub too.

Development

Build Status{: .status }

Feel free to submit bugs, patches, and questions in the repository.

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

Reviews


© 2014–{{ site.time | date: "%Y" }} Anatol Broder. Released under the MIT License.