Error202
/
yii2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Yii2 framework backup
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
9427 Commits
8 Branches
66 Tags
82 MiB
 
 
 
 
 
Tree: d6b7a5e093
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd6b7a5e093'
${ noResults }
yii2/docs/guide/structure-assets.md

20 KiB
Raw Blame History

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:

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.