Javascript and CSS Asset Inclusion and Bundling
For web sites and Javascript apps
All asset files should be added to the folder assets at the root of your Stallion site. Note that all files in this folder will be publicly accessible over the web at /st-assets/subfolder/file-name.ext.
1. Referencing a single file
You can then include any asset file in a template like so: <script src="{ assets.url(site.js)}}"></script>. The path should be relative to the files location in the assets folder. By using, assets.url(), the asset processor will automatically add the last modified timestamp to the file, thus making sure you do not get a cached version from your CDN.
2. Creating a bundle of files
It is a best practice that your production web site should concatenate all your javascript and css files into one file, for faster downloads.
You can do this by creating bundles.
First, create a text file for your bundle, for instance, assets/site.bundle. Then add a line for each file you want to include. :
bootstrap.css
mysite.css
vendor/jquery.js
site.js
You can then include the bundle by referencing it in your template. When you add the .css extension it will output all the CSS, and with the .js extension it will output all the javascript files.
<head>
...
{ assets.bundle("css/site.bundle.css") }}
</head>
<body>
...
{ assets.bundle("css/site.bundle.js") }}
</body>
When you run locally, each file will be loaded individually for easy debugging. When you
For jar-packaged Java applications
The basic procedure is as follows:
- Store your asset files in your application resource folder, in a subfolder that must be named
assets. Note that all files in this folder will be publicly accesible from the web!! - Refer to a particular asset from a template by using the
assets.resource(relativePath, pluginName)method. For example,<link rel="stylesheet" href="{ assets.resource('my-styles.css', 'myPluginName') }}" /> - Create bundles of assets by creating a text file that ends with “.bundle”, for instance,
myapp.bundle. Include this in your template by doing{ assets.bundle("myPluginName", "myapp.bundle") }} - The format of the bundle file is the same as with a normal web site, above.
- In development mode, individual files from the bundle will be included.
- When you run the maven package command, the bundles will be compiled into a concatenated, minified file.