https://github.com/gioppy/statamic-aggregate-assets

Aggregate Javascript and CSS files for better performances
https://github.com/gioppy/statamic-aggregate-assets

css javascript performance statamic statamic-addon statamic-v3

Last synced: about 2 months ago
JSON representation

Aggregate Javascript and CSS files for better performances

• Host: GitHub
• URL: https://github.com/gioppy/statamic-aggregate-assets
• Owner: gioppy
• License: gpl-3.0
• Created: 2021-01-02T10:52:29.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-04-27T12:49:39.000Z (almost 5 years ago)
• Last Synced: 2025-04-15T04:22:54.968Z (11 months ago)
• Topics: css, javascript, performance, statamic, statamic-addon, statamic-v3
• Language: PHP
• Homepage:
• Size: 56.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## Aggregate assets for Statamic 3

Aggregate CSS and JavaScript files into one single file for better loading performance.

### How to use

After installing the addon, create a new disk in the `config/filesystems.php` file:

```

'aggregated' => [

    'driver' => 'local',

    'root' => public_path('aggregated'),

    'url' => '/aggregated',

    'visibility' => 'public',

]

```

You can customize the root directory according to your needs. The only constraint is that the disc visibility must be publicly visible.

To aggregate files use tags pair `{{ aggregate:css }}` and `{{ aggregate:js }}` in your `layout.antlers.html` file.

For better usage, use Aggregate in conjunction with `{{ yield }}`:

```

    

        

        {{ aggregate:css }}

        {{ yield:css }}

        {{ /aggregate:css }}

    

    

        {{ template_content }}

        {{ aggregate:js }}

        {{ yield:js }}

        {{ /aggregate:js }}

    

```

In your blueprint `.antlers.html` file use as always:

```

...

{{ section:css }}

{{ /section:css }}

{{ section:js }}

{{ /section:js }}

```

Remember that the contents of the {{ aggregate }} tags will be replaced with a single CSS or JavaScript tag: insert only locally CSS and JavaScript files.

**Finally, remember that aggregation does not rewrite `url()` within CSS files.**