Skip to content

Instantly share code, notes, and snippets.

@sskylar

sskylar/minify-liquid.html

Last active January 8, 2021 19:00
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save sskylar/7557528 to your computer and use it in GitHub Desktop.
Save sskylar/7557528 to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML minify with Liquid/Siteleaf. Strips all line breaks, tabs, and extra spaces.
Raw
minify-liquid.html
{% capture html %}
<html>
...
</html>
{% endcapture %}{{ html | strip_newlines | replace:' ','' | replace:' ','' | replace:' ',' ' }}
@destroytoday
Copy link

This should be a single filter called minify.

@builtbylane
Copy link

OMG! thank you so much for this! so simple, and so brilliant. used it to create javascript template files from liquid templates! 🔥

@mattmischuk
Copy link

@sskylar Anyway this could work if you space your classes out like I do?

Source:

<header
  class="
  really-long-class-name
  really-long-class-name--is-doing-stuff"
  id="header">
  ...
</header>

Output:

<headerclass="really-long-class-namereally-long-class-name--is-doing-stuff"id="header">...</header>

@jesster2k10
Copy link

+1

@agriboz
Copy link

agriboz commented Jan 8, 2021

@mattmischuk that's the case right.

@mattmischuk
Copy link

@agriboz whoa, a blast from the past. Now that prettier is a thing I don't really concern myself with these types of problems. Since 2015 there are many good html parsers and I wouldn’t recommend relying on liquid to do anything of the sort.

https://github.com/ikatyang/angular-html-parser/tree/master/packages/angular-html-parser

I say, move nonsense like this to a build step. Also, minifying HTML isn't really a big deal. I mean if you’re nutty about perf you’ll likely need to invest some time into learning how to minify HTML with a webpack, rollup, gulp task (or whatever Ruby alternative).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment