Giovanni Buffa
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 }}:
<!doctype html><html lang="{{ site:short_locale }}"> <head> <meta charset="utf-8"> {{ aggregate:css }} {{ yield:css }} {{ /aggregate:css }} </head> <body> {{ template_content }} {{ aggregate:js }} {{ yield:js }} {{ /aggregate:js }} </body></html>In your blueprint .antlers.html file use as always:
...{{ section:css }}<link rel="stylesheet" href="/theme/styles/style1.css" /><link rel="stylesheet" href="/theme/styles/style2.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.
