interitty/assets-manager

Manager with Latte macro that helps to properly load CSS/JS assets.

v1.0.4 2024-09-01 12:10 UTC

Requires

• php: ~8.3
• dg/composer-cleaner: ~2.2
• interitty/di: ~1.0
• interitty/utils: ~1.0
• nette/caching: ~3.3

Requires (Dev)

• interitty/code-checker: ~1.0
• interitty/phpunit: ~1.0
• latte/latte: ~3.0
• nette/application: ~3.2
• nette/bootstrap: ~3.2

MIT

• Pavel Železný

• css
• JS
• sass
• nette
• latte
• gulp
• interitty

README

Manager with Latte macro that helps to properly load CSS/JS assets.

Useful for assets cache busting in the production environment. In the development environment for work with Browsersync, the original path of the asset is rendered.

Requirements

• PHP >= 8.3
• Nette >= 3.2
• Latte >= 3.0

Installation

The best way to install interitty/assets-manager is using Composer:

composer require interitty/assets-manager

Then register the extension in the Nette config file:

# app/config/config.neon
extensions:
    assetsManager: Interitty\AssetsManager\Nette\DI\AssetsManagerExtension

Usage

Macro can be used in any Latte template:

{* app/presenters/templates/@layout.latte *}
<link rel="stylesheet" href="{asset css/asset.css}">
<script src="{asset js/asset.js}"></script>

It prepends the path with `$assetBasePath` and loads revision from the revision manifest:

<link rel="stylesheet" href="/assets/css/asset.aHR0cHM6Ly9nb28uZ2wvS1ZRNHpT.css}">
<script src="/assets/js/asset.aHR0cHM6Ly9nb28uZ2wveFZqZHM0.js"></script>

Revision manifest

The revision manifest is a JSON file that contains the revision path of the asset.

It can be generated by various asset processors such as gulp or other similar tools.

Revision manifest is searched in the `$manifestPath`.

The path to revision manifest can be set directly:

# app/config/config.neon
assetsManager:
    assetBasePath: /assets/
    manifestPath: %wwwDir%/assets/manifest.json

Revision manifest may contain the asset path.

Asset version in the file name

With this method, the files have a different name at each change.

Example revision manifest:

{
    "css/asset.css": "css/asset.aHR0cHM6Ly9nb28uZ2wvS1ZRNHpT.css",
    "js/asset.js": "js/asset.aHR0cHM6Ly9nb28uZ2wveFZqZHM0.js"
}

With the example manifest, the code {asset "js/asset.js"} generates: /assets/js/asset.aHR0cHM6Ly9nb28uZ2wveFZqZHM0.js path.

Configuration

The default configuration, that can be changed to suit your needs:

# app/config/config.neon
assetsManager:
    assetBasePath: ''
    manifestPath: ''
    productionMode: %productionMode%
    wwwDir: %wwwDir%