Pack and compress CSS and Javascript from an HTML file

huddle - Pack and compress CSS and Javascript

huddleis a tool to retrieve CSS and Javascript references from an HTML file and pack and compress those files.


huddle [ options... ]

Supported options:

  • -i filenameor --input- Use filenameas the input HTML file (default: index.html)
  • -o filenameor --output- Use filenameas the output HTML file (default: index-min.html)
  • -hor --help- Show help message

Input should be an HTML document. All script and css tags should be parsed and the files from it merged and compressed. The output HTML should be stripped from whitespace and contain the path to the merged and compressed files.

Supported formats

Huddle can handle CSS and Javascript files by default. Huddle will also compile less files into CSS and merge the result with the other CSS files. You can specify a less stylesheet with the following tag:

<link href="example.less" rel="stylesheet/less" type="text/css"/>


By default all CSS files will be added to app.cssand all Javascript files to app.js. You can specify a module per tag to change this behavior. For example:

<script data-module="libs" type="text/javascript" src="jquery.js"></script>

will add jquery.jsto to libs.jsand not to app.js.

Drop files

If you don't want to have a certain CSS or Javascript in your compressed code but you do want to use it in the non-compressed version you can use the data-dropoption.

<script data-drop="" type="text/javascript" src="less.js"></script>

This example will allow you to use less.jsin development mode to render less stylesheets on the client and not include less.jsin production code since it will be converted to CSS.

Remote includes

When you want to use local files for development but want to use remote files in production you can use the data-remoteattribute. This will allow you to use a CDN for example in your production environment.

<script data-remote="" type="text/javascript" src="jquery.js"></script>

Obviel templates

Obvielis a client-side web framework for jQuery. When using an Obviel view with a obvtUrlparameter it will be converted to obvtand the template will be rendered inline with all newlines and leading and trailing whitespace stripped.







扫码加入 JavaScript 社区