Asset Component is a port of Laravel 3 Asset for Orchestra Platform. The component main functionality is to allow asset declaration to be handle dynamically and asset dependencies can be resolve directly from the container. It however is not intended to becoma an asset pipeline package for Laravel, for such purpose we would recommend to use Grunt or Gulp.
| Laravel | Asset |
|---|---|
| 5.5.x | 3.5.x |
| 5.6.x | 3.6.x |
| 5.7.x | 3.7.x |
| 5.8.x | 3.8.x |
| 6.x | 4.x |
| 7.x | 5.x |
| 8.x | 6.x |
To install through composer, run the following command from terminal:
composer require "orchestra/asset"
Add following service providers in config/app.php.
'providers' => [
// ...
Orchestra\Asset\AssetServiceProvider::class,
Collective\Html\HtmlServiceProvider::class,
],You might want to add Orchestra\Support\Facades\Asset to class aliases in config/app.php:
'aliases' => [
// ...
'Asset' => Orchestra\Support\Facades\Asset::class,
],The Asset class provides a simple way to manage the CSS and JavaScript used by your application. To register an asset just call the add method on the Asset class:
Asset::add('jquery', 'js/jquery.js');The add method accepts three parameters. The first is the name of the asset, the second is the path to the asset relative to the public directory, and the third is a list of asset dependencies (more on that later). Notice that we did not tell the method if we were registering JavaScript or CSS. The add method will use the file extension to determine the type of file we are registering.
When you are ready to place the links to the registered assets on your view, you may use the styles or scripts methods:
Dumping assets into a view:
<head>
{!! Asset::styles() !!}
{!! Asset::scripts() !!}
</head>Above code can also be simplified as:
<head>
{!! Asset::show() !!}
</head>Sometimes you may need to specify that an asset has dependencies. This means that the asset requires other assets to be declared in your view before it can be declared. Managing asset dependencies couldn't be easier in Laravel. Remember the "names" you gave to your assets? You can pass them as the third parameter to the add method to declare dependencies:
Registering a bundle that has dependencies:
Asset::add('jquery-ui', 'js/jquery-ui.js', 'jquery');In this example, we are registering the jquery-ui asset, as well as specifying that it is dependent on the jquery asset. Now, when you place the asset links on your views, the jQuery asset will always be declared before the jQuery UI asset. Need to declare more than one dependency? No problem:
Registering an asset that has multiple dependencies:
Asset::add('jquery-ui', 'js/jquery-ui.js', ['first', 'second']);To increase response time, it is common to place JavaScript at the bottom of HTML documents. But, what if you also need to place some assets in the head of your document? No problem. The asset class provides a simple way to manage asset containers. Simply call the container method on the Asset class and mention the container name. Once you have a container instance, you are free to add any assets you wish to the container using the same syntax you are used to:
Retrieving an instance of an asset container:
Asset::container('footer')->add('example', 'js/example.js');Dumping that assets from a given container:
{!! Asset::container('footer')->scripts() !!}Another option to increase response time is by utilizing browser caching, while there few ways to do this we pick last modified time as our way to version the Asset.
Asset::container()->addVersioning();
// or alternatively
Asset::addVersioning();Note: this would only work with local asset.
You can remove adding versioning number by using:
Asset::container()->removeVersioning();
// or alternatively
Asset::removeVersioning();