The asset compiler

When creating a product page or a landing page, it will probably be very much about designing a beautiful page. Beautiful webpages need assets, and you probably will use some kind of preprocessor. We wanted to take much of pain out of asset handling, and to give you a really cool way to handle assets.

blaze's asset compiler will make asset handling easy and fun. There are very few but very powerful functions.

There is a coding example at the bottom of this page.

Debugging

The asset compiler will automatically minify and concatenate your assets depending on your configuration.

If debug mode is enabled, assets will be compiled but not concatenated nor minified. This simplifies debugging .

On the other hand, if you disable debug mode, the asset compiler will put all assets into as few files as possible in order to reduce file requests and loading times.

CSS reset and unreset

There are two configuration options named as 'use CSS reset' and 'use CSS unreset'. If enabled, they will inject reset and unreset files into the asset compiler directly before your script is called.

See the coding example at the bottom.

Available functions

    $blaze->assets->add($assets);

You will use this method to add asset files to the asset compiler. $assets could be a string holding one single filename, a string holding a comma separated list of files or an array holding multiple filenames as string. The asset compiler will automatically detect the file type depending on the file extension.

Add the assets with their path relative to the rootfolder of your domain's webspace. The assets will automatically be compiled (if needed) by this function if they have been changed since the last compiling.

    $blaze->assets->insertHere();

This method will output <link> or <script> tags for all assets that were added until here. See the coding example at the bottom.

You might want to separate CSS from Javascript. It is generally recommended to place CSS at the beginning (in the head section), and JavaScript assets at the bottom of your html for quicker page rendering. blaze provides two methods for this:

    $blaze->assets->insertCSSHere();
    $blaze->assets->insertJSHere();

Both methods do the same as insertHere() but limited to either CSS assets or JavaScript assets.

Coding example

Let's imagine you would do something like this with CSS reset and unreset enabled:

<?php
    // Setup assets
    $blaze->assets->add(array(
        // Pure CSS
        '/assets/test.css',

        // LESS
        '/assets/less/test.less',

        // SASS
        '/assets/scss/test.scss',

        // Pure JavaScript
        '/assets/js/jquery.js',
        '/assets/js/test.js',

        // Coffeescript
        '/assets/cs/test.cs'
    ));
?>
<html>
    <head>
        <?php $this->assets->insertCSSHere(); ?>
    </head>
    <body>
        <?php $this->assets->insertJSHere(); ?>
    </body>
</html>

blaze's output with debug mode enabled

    <html>
        <head>
            <link href="/blaze/assets/css/reset.css" rel="stylesheet" type="text/css"/>
            <link href="/blaze/assets/css/unreset.css" rel="stylesheet" type="text/css"/>
            <link href="/assets/test.css" rel="stylesheet" type="text/css"/>
            <link href="/assets/less/test.css" rel="stylesheet" type="text/css"/>
            <link href="/assets/scss/test.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
            <script src="/assets/js/jquery.js" type="text/javascript"></script>
            <script src="/assets/js/test.js" type="text/javascript"></script>
            <script src="/assets/cs/test.js" type="text/javascript"></script>
        </body>
    </html>

blaze's output with debug mode disabled

The filenames are random and will change when you change anything within your assets.

    <html>
        <head>
            <link href="/blaze/cache/min/3404f88bb638b3836ee521d8a3dd46ad12229.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
            <script src="/blaze/cache/min/8d1b1f126a1b51a99ff83fb587768b5911817.js" type="text/javascript"></script>
        </body>
    </html>