Minify HTML files in text/html templates

Question

I use mustache/handlebar templates.

eg:

<script id="contact-detail-template" type="text/html">
    <div>... content to be compressed </div>
</script>

I am looking to compress/minify my HTML files in the templates for the best compression.

YUIcompressor, closure does not work as they think that it is script and gives me script errors.

HTMLCompressor does not touch them even as it thinks that it is a script.

How do I minify the content in the script tags with type text/html? Can I use a library? If not, is sed or egrep a preferable way? Do you have sed/egrep syntax to remove empty lines (with just spaces or tabs), remove all tabs, trim extra spaces?

Thanks.

Mertiemerton

Answer 1

sed -e "s/^[ \t]*//g" -e "/^$/d" yourfile This will remove all the extra spaces and tabs from the begining, and remove all empty lines.

sed -e "s/^[ \t]*//g" -e ":a;N;$!ba;s/\n//g" yourfile This will remove all the extra spaces and tabs from the begining, and concatenate all your code.

Sorry if i missed something.

Repartition

If you are not on Windows, change from double quotes, to single quotes. – Repartition

Thanks. It's close but it does not remove the tabs. After some research, I figured out that \t does not work. You should do a ctrl+v and then hit a tab on the command line. Putting in script, you should hit a tab instead of \t. It worked otherwise. Thanks. – Mertiemerton

on mac iterm2, when i copy and paste on terminal its not working sed -e "s/^[ \t]*//g" -e ":a;N;$basename utility.js;s/\n//g" also its not working on mac terminal – Mainspring

@Mainspring you may need to wrap the commands with single quotes instead of double quotes. The ! character is likely getting involved with your zsh/mac command history. – Nari

Answer 2

Use sed ':a;N;$!ba;s/>\s*</></g' file, it enables to you remove whitespaces and newlines where unneeded. Unlike ghaschel example, this doesn't remove those useful whitespaces in the beginning of the line as it preserves <pre> and <p> tags.

This is useful as you can remove whitespaces between > and < which is a common method to enlarge a html file. This example could also be used for a XML file like atom feed and rss feed for example.

I personally use this as a pipe in my site generator, this can reduce a normaly file size and can be use in conjunction with gzip.

Hypertrophy

Answer 3

Try using Pretty Diff to minify this kind of code. It will only assume the stuff inside script tags is JavaScript if there is no mime type or if the type is one of the various JavaScript types. It is also intelligent enough to know which white space is okay to remove without corrupting the output of content or the recursive beautification of code later.

Teenateenage

Thank you. The tool is promising but lacks a simple command-like-tool - minify.sh etc. The other tools like htmlcompressor, yui are fairly simple to use. 'Pretty diff' is simple if we are using it in a node.js app but is very convoluted if used in normal apps. You have to build a maven-kind of script and then execute. I prefer sed to this Pretty Diff if removing tabs/spaces is the purpose. – Mertiemerton

It offers native command line support in Windows using WSH. Please see prettydiff.com/prettydiff.wsf as the api to WSH. I am currently working on an extension to allow directory and subdirectory comparisons opposed to mere file comparisons. For other systems I do offer some support for Node.js using a file api.js. The Node.js support is a bit dated and I plan to update this soon. – Teenateenage

Unfortunately, I am using mac. I would suggest you add a .jar if possible which can be run as a .sh. If not, a custom .sh would be good for unix users. I love this library and look forward to using it when I have access to .sh files. – Mertiemerton

To my knowledge Bash shell does not offer interpretation of JavaScript and current distributions of Unix and Linux do not offer JavaScript interpretation like the way they offer a Perl interpreter. In this case you would have to install an additional program, such as Node.js. I do not have a lot of experience with Mac, so I can be entirely wrong. – Teenateenage