Docs » Minify your JS and CSS

Webhook has a built in system for managing static assets that can be used to minify and version your Javascript and CSS files. We highly recommend doing this as it ensures your users always download the newest versions of your files. More importantly, the files will themselves be much smaller, making your actual site much snappier.

Using Webhook to minify, version and combine your files

In order to use this system you must wrap any local CSS/JS tags in a special notation described below.

An example for CSS

<!-- build:css /static/css/path_to_minified.css -->
<link rel="stylesheet" href="/static/css/some.css"/>
<link rel="stylesheet" href="/static/css/other.css"/>
<!-- endbuild -->

Webhook will then combine some.css and other.css into a single file called path_to_minified.css as part of our deploy process.

Use the full path to your files
Note the output path needs to be the full path to your static file /static/something/, not a relative path ../something/.

An example for Javascript

Javascript is handled in a similar way.

<!-- build:js /static/javascript/path_to_minified.js -->
<script src="/static/javascript/some.js"></script>
<script src="/static/javascript/other.js"></script>
<!-- endbuild -->

This will combine some.js and other.js into a single file called path_to_minified.js, which will be minified and versioned.

You can have multiple separate declarations of files, an they can be in any template. For Example:

<!-- build:js /static/javascript/minified1.js -->
<script src="/static/javascript/some.js"></script>
<script src="/static/javascript/other.js"></script>
<!-- endbuild -->

<!-- build:js /static/javascript/minified2.js -->
<script src="/static/javascript/more.js"></script>
<script src="/static/javascript/even_more.js"></script>
<!-- endbuild -->

This will generate two files, minified1.js and minified2.js.

Does not work with remote files!
You can't minify and version files hosted somewhere else on the Internet. Below is an example of minification that will break your system.
    <!-- build:js /static/javascript/minified.js -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/static/javascript/some.js"></script>
    <!-- endbuild -->

This will not work, and the compiled file minified.js will only include the JS from some.js not from the remote file.