20 KiB
Assets
Note: This section is under writing.
An asset in Yii is a file that may be referenced or linked in a Web page. It can be a CSS file, a JavaScript file, an image or video file, etc. For simple Web applications, assets may be managed manually - you place them in a Web folder and reference them using their URLs in your Web pages. However, if an application is complicated, or if it uses many third-party extensions, manual management of assets can soon become a headache. For example, how will you ensure one JavaScript file is always included before another and the same JavaScript file is not included twice? How will you handle asset files required by an extension which you do not want to dig into its internals? How will you combine and compress multiple CSS/JavaScript files into a single one when you deploy the application to production? In this section, we will describe the asset management capability offered by Yii to help you alleviate all these problems.
Asset Bundles
Assets are organized in bundles. An asset bundle represents a collection of asset files located under a single directory. It lists which CSS and JavaScript files are in this collection and should be included in a page where the bundle is used.
Defining Asset Bundles
An asset bundle is defined in terms of a PHP class extending from yii\web\AssetBundle. In this class, you use certain class properties to specify where the asset files are located, what CSS/JavaScript files the bundle contains, and so on. The class should be namespaced and autoloadable. Its name is used as the name of the asset bundle.
The following code defines the main asset bundle used by the basic application template:
<?php
namespace app\assets;
use yii\web\AssetBundle;
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',
];
}
The AppAsset
class basically specifies that the asset files are located under the @webroot
directory which
is corresponding to the URL @web
. The bundle only contains an asset file named css/site.css
. The bundle
depends on two other bundles: yii\web\YiiAsset
and yii\bootstrap\BootstrapAsset
.
The following list explains the possible properties that you can set in an asset bundle class:
- yii\web\AssetBundle::sourcePath: specifies the root directory that contains the asset files in this bundle. This property should be set if the root directory is not Web accessible. Otherwise, you should set the yii\web\AssetBundle::basePath property and yii\web\AssetBundle::baseUrl, instead. Path aliases can be used here.
- yii\web\AssetBundle::basePath: specifies a Web-accessible directory that contains the asset files in this bundle. When you specify the yii\web\AssetBundle::sourcePath property, the asset manager will publish the assets in this bundle to a Web-accessible directory and overwrite this property accordingly. You should set this property if your asset files are already in a Web-accessible directory and do not need asset publishing. Path aliases can be used here.
- yii\web\AssetBundle::baseUrl: specifies the URL corresponding to the directory yii\web\AssetBundle::basePath. Like yii\web\AssetBundle::basePath, if you specify the yii\web\AssetBundle::sourcePath property, the asset manager will publish the assets and overwrite this property accordingly. Path aliases can be used here.
- yii\web\AssetBundle::js: an array listing the JavaScript files contained in this bundle. Note that only
forward slash "/" should be used as directory separators. Each JavaScript file can be specified in one of the
following two formats:
- a relative path representing a local JavaScript file (e.g.
js/main.js
). The actual path of the file can be determined by prepending basePath to the relative path, and the actual URL of the file can be determined by prepending baseUrl to the relative path. - an absolute URL representing an external JavaScript file. For example,
http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
or//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
.
- a relative path representing a local JavaScript file (e.g.
- yii\web\AssetBundle::css: an array listing the CSS files contained in this bundle. The format of this array is the same as that of yii\web\AssetBundle::js.
- yii\web\AssetBundle::depends: an array listing the names of the asset bundles that this bundle depends on (to be explained shortly).
- yii\web\AssetBundle::jsOptions: specifies the options that will be passed to the yii\web\View::registerJsFile() method when it is called to register every JavaScript file in this bundle.
- yii\web\AssetBundle::cssOptions: specifies the options that will be passed to the yii\web\View::registerCssFile() method when it is called to register every CSS file in this bundle.
- yii\web\AssetBundle::publishOptions: specifies the options that will be passed to the yii\web\AssetManager::publish() method when it is called to publish source asset files to a Web folder. This is only used if you specify the yii\web\AssetBundle::sourcePath property.
Asset Locations
Assets, based on their location, can be classified as:
- source assets: the asset files are located together with PHP source code which cannot be directly accessed via Web. In order for source assets to be Web accessible, they should be published and turned in published assets.
- published assets: the asset files are located in a Web folder and can thus be directly accessed via Web.
- external assets: the asset files are located on a Web server that is different from the one hosting your Web application.
For assets that directly belong to an application, it is recommended that you place them in a Web folder
to avoid the unnecessary asset publishing process. This is why AppAsset
specifies yii\web\AssetBundle::basePath
without yii\web\AssetBundle::sourcePath.
For assets belonging to an extension, as they are in a folder that is not Web accessible, you have to specify the yii\web\AssetBundle::sourcePath property when declaring the corresponding asset bundle.
Note: Do not use
@webroot/assets
as the yii\web\AssetBundle::sourcePath. This folder is used by default by the yii\web\AssetManager to keep the asset files published from their source location. Any content in this folder are considered temporarily and may be subject to removal.
Asset Dependencies
When you include multiple CSS or JavaScript files on a Web page, they have to follow certain orders to avoid unexpected overriding. For example, if you are using a jQuery UI widget in a Web page, you have to make sure the jQuery JavaScript file is included before the jQuery UI JavaScript file is included. We call such ordering the dependencies among assets.
Asset dependencies are mainly specified through the yii\web\AssetBundle::depends property of asset bundles.
In the AppAsset
example, the asset bundle depends on two other asset bundles: yii\web\YiiAsset
and
yii\bootstrap\BootstrapAsset
. And for the jQuery UI example just described, the asset bundle is declared as follows:
class JuiAsset extends AssetBundle
{
public $sourcePath = '@bower/jquery-ui';
public $js = [
'jquery-ui.js',
];
public $css = [
'themes/smoothness/jquery-ui.css',
];
public $depends = [
'yii\web\JqueryAsset',
];
}
Using Asset Bundles
To use an asset bundle, register it with a view like the following in a view template:
use app\assets\AppAsset;
AppAsset::register($this);
where $this
refers to the yii\web\View object. If you are registering an asset bundle in a PHP class,
you should provide the needed the view object. For example, to register an asset bundle in
a widget class, you can obtain the view object by $this->view
.
When an asset bundle is registered, behind the scene Yii will register all its dependent asset bundles. And
when a page is being rendered, <link>
and <script>
tags will be generated in the page for the CSS and
JavaScript files in every registered asset bundle. During this process, if an asset bundle is not in
a Web accessible folder, it will be published first.
Asset Publishing
When an asset file is located in a folder that is not Web accessible, it should be copied to a Web accessible folder before being referenced or linked in a Web page. This process is called asset publishing, and is done automatically by the yii\web\AssetManager.
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:
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.
Language-specific asset bundle
If you need to define an asset bundle that includes JavaScript file depending on the language you can do it the following way:
class LanguageAsset extends AssetBundle
{
public static $language;
public $sourcePath = '@app/assets/language';
public $js = [
];
public function init()
{
parent::init();
$language = self::$language ? self::$language : Yii::$app->language;
$this->js[] = 'language-' . $language . '.js';
}
}
In order to set language use the following code when registering an asset bundle in a view:
LanguageAsset::$language = $language;
LanguageAsset::register($this);
Setting special options
Asset bundles allow setting specific options for the files to be published. This can be done by configuring the yii\web\AssetBundle::$jsOptions, yii\web\AssetBundle::$cssOptions or yii\web\AssetBundle::$publishOptions property of the asset bundle.
Some of these options are described in the following:
-
For setting conditional comments for your CSS files you can set the following option:
public $cssOptions = ['condition' => 'lte IE9'];
This will result in a link tag generated as follows:
<!--[if lte IE9]><link .../><![endif]-->
. You can only define one condition per asset bundle, if you have multiple files with different conditions, you have to define multiple assets bundles. -
For javascipt files you can define the position where they should be added in the HTML. You can choose one of the following positions:
- yii\web\View::POS_HEAD: in the head section
- yii\web\View::POS_BEGIN: at the beginning of the body section
- yii\web\View::POS_END: at the end of the body section. This is the default value.
Example for putting all javascript files to the end of the body.
public $jsOptions = ['position' => \yii\web\View::POS_END];
This option is also reflected when resolving dependencies.
-
For further javascript options, see yii\helpers\Html::jsFile().
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
:
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 the yii\web\AssetManager::bundles property of asset manager. Keys are fully qualified class names 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.
Tip: You may also use this procedure to configure different scripts dependent on the environment. For example use minified files in production and normal files in development:
'yii\web\JqueryAsset' => [ 'js' => [ YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js' ] ],
Compressing and combining assets
--------------------------------
To improve application performance you can compress and then combine several CSS or JS files into lesser number of files
therefore reducing number of HTTP requests and overall download size needed to load a web page. Yii provides a console
command that allows you to do both.
### Preparing configuration
In order to use `asset` command you should prepare a configuration first. A template for it can be generated using
yii asset/template /path/to/myapp/config.php
The template itself looks like the following:
```php
<?php
/**
* Configuration file for the "yii asset" console command.
* Note that in the console environment, some path aliases like '@webroot' and '@web' may not exist.
* Please define these missing path aliases.
*/
return [
// Adjust command/callback for JavaScript files compressing:
'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
// Adjust command/callback for CSS files compressing:
'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
// The list of asset bundles to compress:
'bundles' => [
// 'yii\web\YiiAsset',
// 'yii\web\JqueryAsset',
],
// Asset bundle for compression output:
'targets' => [
'app\config\AllAsset' => [
'basePath' => 'path/to/web',
'baseUrl' => '',
'js' => 'js/all-{hash}.js',
'css' => 'css/all-{hash}.css',
],
],
// Asset manager configuration:
'assetManager' => [
'basePath' => __DIR__,
'baseUrl' => '',
],
];
In the above keys are properties
of AssetController
. bundles
list contains bundles that should be compressed. These are typically what's used by application.
targets
contains a list of bundles that define how resulting files will be written. In our case we're writing
everything to path/to/web
that can be accessed like http://example.com/
i.e. it is website root directory.
Note: in the console environment some path aliases like '@webroot' and '@web' may not exist, so corresponding paths inside the configuration should be specified directly.
JavaScript files are combined, compressed and written to js/all-{hash}.js
where {hash} is replaced with the hash of
the resulting file.
jsCompressor
and cssCompressor
are console commands or PHP callbacks, which should perform JavaScript and CSS files
compression correspondingly. You should adjust these values according to your environment.
By default Yii relies on Closure Compiler for JavaScript file compression,
and on YUI Compressor. You should install this utilities manually, if you wish to use them.
Providing compression tools
The command relies on external compression tools that are not bundled with Yii so you need to provide CSS and JS
compressors which are correspondingly specified via cssCompressor
and jsCompression
properties. If compressor is
specified as a string it is treated as a shell command template which should contain two placeholders: {from}
that
is replaced by source file name and {to}
that is replaced by output file name. Another way to specify compressor is
to use any valid PHP callback.
By default for JavaScript compression Yii tries to use
Google Closure compiler that is expected to be in a file named
compiler.jar
.
For CSS compression Yii assumes that YUI Compressor is looked up in a file
named yuicompressor.jar
.
In order to compress both JavaScript and CSS, you need to download both tools and place them under the directory
containing your yii
console bootstrap file. You also need to install JRE in order to run these tools.
You may customize the compression commands (e.g. changing the location of the jar files) in the config.php
file
like the following,
return [
'cssCompressor' => 'java -jar path.to.file\yuicompressor.jar --type css {from} -o {to}',
'jsCompressor' => 'java -jar path.to.file\compiler.jar --js {from} --js_output_file {to}',
];
where {from}
and {to}
are tokens that will be replaced with the actual source and target file paths, respectively,
when the asset
command is compressing every file.
Performing compression
After configuration is adjusted you can run the compress
action, using created config:
yii asset /path/to/myapp/config.php /path/to/myapp/config/assets_compressed.php
Now processing takes some time and finally finished. You need to adjust your web application config to use compressed assets file like the following:
'components' => [
// ...
'assetManager' => [
'bundles' => require '/path/to/myapp/config/assets_compressed.php',
],
],
Using asset converter
Instead of using CSS and JavaScript directly often developers are using their improved versions such as LESS or SCSS for CSS or Microsoft TypeScript for JavaScript. Using these with Yii is easy.
First of all, corresponding compression tools should be installed and should be available from where yii
console
bootstrap file is. The following lists file extensions and their corresponding conversion tool names that Yii converter
recognizes:
- LESS:
less
-lessc
- SCSS:
scss
,sass
-sass
- Stylus:
styl
-stylus
- CoffeeScript:
coffee
-coffee
- TypeScript:
ts
-tsc
So if the corresponding tool is installed you can specify any of these in asset bundle:
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.less',
];
public $js = [
'js/site.ts',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
In order to adjust conversion tool call parameters or add new ones you can use application config:
// ...
'components' => [
'assetManager' => [
'converter' => [
'class' => 'yii\web\AssetConverter',
'commands' => [
'less' => ['css', 'lessc {from} {to} --no-color'],
'ts' => ['js', 'tsc --out {to} {from}'],
],
],
],
],
In the above we've left two types of extra file extensions. First one is less
that can be specified in css
part
of an asset bundle. Conversion is performed via running lessc {from} {to} --no-color
where {from}
is replaced with
LESS file path while {to}
is replaced with target CSS file path. Second one is ts
that can be specified in js
part
of an asset bundle. The command that is run during conversion is in the same format that is used for less
.