NAME

Mojolicious::Plugin::AssetPack::Manual::Include - How to include assets in the template

DESCRIPTION

This manual will show you various ways to include the assets generated by Mojolicious::Plugin::AssetPack.

Example asset

The description below uses the following example CSS asset. The same rules apply to other formats as well, such as JavaScript assets.

  app->asset(
    "my-asset.css" => (
      "/css/foo.less",
      "/css/bar.scss",
      "/css/main.css",
    )
  );

USAGE

Here are some ways to use Mojolicious::Plugin::AssetPack.

Simple

The simplest way to include an asset is simply by using the asset helper:

  %= asset "my-asset.css"

This will result in a list of link tags in development mode and a single html link tag in production mode.

  • production

      <link rel="stylesheet" href="/packed/my-asset-9bb8a2a996dde4692205a829ba6d1c8a.css">
  • development

      <link rel="stylesheet" href="/packed/foo-9bb8a2a996dde4692205a829ba6d1c8a.css">
      <link rel="stylesheet" href="/packed/bar-9bbaa9de620a29a618a8277636acfe33.css">
      <link rel="stylesheet" href="/css/main.css">

Inline

AssetPack is able to insert your assets directly into your markup. This is useful if you want to make a one-page app and want to keep the number of requests to the server at a minimum. However, the images, fonts or any other external asset which again is referred to require more requests to the server. See below on how to include the asset directly in your template:

  %= asset "app.css", {inline => 1}

The same rules for expansion as for "Simple" apply here, but the the result will be a style tag, or a list of style tags:

  <style type="text/stylesheet">
    /* your css here */
  </style>

Attributes

You can pass on tag attributes to the generated HTML tag, with a list of arguments at the end:

  %= asset "app.css", {}, media => "print,handheld,embossed"

Full control

If you want, it is possible to add the assets manually to the template, using the "get" in Mojolicious::Plugin::AssetPack method:

  % for my $asset (asset->get("app.js")) {
    <script src="<%= $asset %>"></script>
  % }

AUTHOR

Jan Henning Thorsen - jhthorsen@cpan.org