PHPackages                             johannschopplich/kirby-hashed-assets - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. johannschopplich/kirby-hashed-assets

ActiveKirby-plugin[File & Storage](/categories/file-storage)

johannschopplich/kirby-hashed-assets
====================================

File name hashes support for css() and js() helpers

3.0.10(2y ago)231.5kMITPHP

Since Dec 26Pushed 2y ago2 watchersCompare

[ Source](https://github.com/johannschopplich/kirby-hashed-assets)[ Packagist](https://packagist.org/packages/johannschopplich/kirby-hashed-assets)[ Docs](https://github.com/johannschopplich/kirby-hashed-assets#readme)[ RSS](/packages/johannschopplich-kirby-hashed-assets/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (4)Versions (42)Used By (0)

Kirby Hashed Assets
===================

[](#kirby-hashed-assets)

Enhances Kirby's `css()` and `js()` helpers to support hashed filenames. Pass your normal paths (e.g. `…main.js`) – the plugin will lookup hashed assets and transform the path automatically (e.g. `…main.20201226.js`). That way you can even keep asset paths identical in development and production environment!

Key Features
------------

[](#key-features)

- 🛷 Cache bust assets without query strings
- 🎢 **No need** for web server rewrite rules!
- ⛸ Supports `manifest.json`
- 🎿 Supports manually hashed file names
- ☃️ Create preload links with `hashedUrl()` helper

Projects Using the Hashed Assets Plugin
---------------------------------------

[](#projects-using-the-hashed-assets-plugin)

- [plainkit-hashed-assets](https://github.com/johannschopplich/plainkit-hashed-assets) – a simple demonstration based on Kirby's plain kit
- [realtroll.de](https://github.com/johannschopplich/realtroll.de) – a clean website using this plugin for asset hashing

Requirements
------------

[](#requirements)

- PHP 8.0+
- Kirby 3.7+

Installation
------------

[](#installation)

### Download

[](#download)

Download and copy this repository to `/site/plugins/kirby-hashed-assets`.

### Git Submodule

[](#git-submodule)

```
git submodule add https://github.com/johannschopplich/kirby-hashed-assets.git site/plugins/kirby-hashed-assets
```

### Composer

[](#composer)

```
composer require johannschopplich/kirby-hashed-assets
```

Usage
-----

[](#usage)

### Automatic Hashing With `manifest.json`

[](#automatic-hashing-with-manifestjson)

For file hashing this plugin uses the [hashup](https://github.com/johannschopplich/hashup) npm package.

`hashup` is a tiny CLI tool with two objectives in mind for your freshly build assets:

1. Rename or rather hash (hence the name) the assets.
2. Generate a `manifest.json` for them.

You don't even have to install it to your `devDependencies`, since `npx` will fetch it once on the fly. Add hashup to your build pipeline by adding it your `package.json` scripts (recommended), for example:

```
{
  "scripts": {
    "clean": "rm -rf public/assets/{css,js}",
    "build": "npm run clean &&  && npx -y hashup"
  }
}
```

Now, pass asset paths to Kirby's asset helpers like you normally do:

```