Alexander Makarov
11 years ago
1 changed files with 117 additions and 0 deletions
@ -0,0 +1,117 @@
|
||||
Managing assets |
||||
=============== |
||||
|
||||
An asset in Yii is a file that is included into the page. It could be CSS, JavaScript or |
||||
any other file. Framework provides many ways to work with assets from basics such as adding `<script src="` tag |
||||
for a file that is [handled by View](view.md) section to advanced usage such as pusblishing files that are not |
||||
under webserve document root, resolving JavaScript dependencies or minifying CSS. |
||||
|
||||
Declaring asset bundle |
||||
---------------------- |
||||
|
||||
In order to publish some assets you should declare an asset bundle first. The bundle defines a set of asset files or |
||||
directories to be published and their dependencies on other asset bundles. |
||||
|
||||
Both basic and advanced application templates contain `AppAsset` asset bundle class that defines assets required |
||||
applicationwide. Let's review basic application asset bundle class: |
||||
|
||||
```php |
||||
class AppAsset extends AssetBundle |
||||
{ |
||||
public $basePath = '@webroot'; |
||||
public $baseUrl = '@web'; |
||||
public $css = [ |
||||
'css/site.css', |
||||
]; |
||||
public $js = [ |
||||
]; |
||||
public $depends = [ |
||||
'yii\web\YiiAsset', |
||||
'yii\bootstrap\BootstrapAsset', |
||||
]; |
||||
} |
||||
``` |
||||
|
||||
In the above `$basePath` specifies web-accessible directory assets are served from. It is a base for relative |
||||
`$css` and `$js` paths i.e. `@webroot/css/site.css` for `css/site.css`. Here `@webroot` is an alias that points to |
||||
application's `web` directory. |
||||
|
||||
`$baseUrl` is used to specify base URL for the same relative `$css` and `$js` i.e. `@web/css/site.css` where `@web` |
||||
is an alias that corresponds to your website base URL such as `http://example.com/`. |
||||
|
||||
In case you have asset files under non web accessible directory, that is the case for any extension, you need |
||||
to additionally specify `$sourcePath`. Files will be copied or symlinked from source bath to base path prior to being |
||||
registered. In case source path is used `baseUrl` is generated automatically at the time of publising asset bundle. |
||||
|
||||
Dependencies on other asset bundles are specified via `$depends` property. It is an array that contains fully qualified |
||||
names of bundle classes that should be published in order for this bundle to work properly. |
||||
|
||||
Here `yii\web\YiiAsset` adds Yii's JavaScript library while `yii\bootstrap\BootstrapAsset` includes |
||||
[Bootstrap](http://getbootstrap.com) frontend framework. |
||||
|
||||
Asset bundles are regular classes so if you need to define another one, just create alike class with unique name. This |
||||
class can be placed anywhere but the convention for it is to be under `assets` directory of the applicaiton. |
||||
|
||||
Registering asset bundle |
||||
------------------------ |
||||
|
||||
Asset bundle classes are typically registered in views or, if it's main application asset, in layout. Doing it is |
||||
as simple as: |
||||
|
||||
```php |
||||
use app\assets\AppAsset; |
||||
AppAsset::register($this); |
||||
``` |
||||
|
||||
Since we're in a view context `$this` refers to `View` class. |
||||
|
||||
Overriding asset bundles |
||||
------------------------ |
||||
|
||||
Sometimes you need to override some asset bundles application wide. A good example is loading jQuery from CDN instead |
||||
of your own server. In order to do it we need to configure `assetManager` application component via config file. In case |
||||
of basic application it is `config/web.php`: |
||||
|
||||
```php |
||||
return [ |
||||
// ... |
||||
'components' => [ |
||||
'assetManager' => [ |
||||
'bundles' => [ |
||||
'yii\web\JqueryAsset' => [ |
||||
'sourcePath' => null, |
||||
'js' => ['//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'] |
||||
], |
||||
], |
||||
], |
||||
], |
||||
]; |
||||
``` |
||||
|
||||
In the above we're adding asset bundle definitions to `bunldes` property of asset manager. Keys there are fully |
||||
qualified class paths to asset bundle classes we want to override while values are key-value arrays of class properties |
||||
and corresponding values to set. |
||||
|
||||
Setting `sourcePath` to `null` tells asset manager not to copy anything while `js` overrides local files with a link |
||||
to CDN. |
||||
|
||||
Enabling symlinks |
||||
----------------- |
||||
|
||||
Asset manager is able to use symlinks instead of copying files. It is turned off by default since symlinks are often |
||||
disabled on shared hosting. If your hosting environment supports symlinks you certainly should enable the feature via |
||||
application config: |
||||
|
||||
```php |
||||
return [ |
||||
// ... |
||||
'components' => [ |
||||
'assetManager' => [ |
||||
'linkAssets' => true, |
||||
], |
||||
], |
||||
]; |
||||
``` |
||||
|
||||
There are two main benefits in enabling it. First it is faster since no copying is required and second is that assets |
||||
will always be up to date with source files. |
Loading…
Reference in new issue