How do I manage assets in Yii2?

Question

For example, I created a new page, and I'd like to use, for example, backbone.js, custom css file and some collection of images. Where should I declare all this stuff in Yii2? I found the AppAsset.php module, but this is only for css/js files and I haven't noticed any changes when my css/js files and path were declared there:

class AppAsset extends AssetBundle {
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'js/jquery.mobile-1.4.2.min.css',
    ];
    public $js = [
        'js/jsquery-2.1.0.min.js',
        'js/jquery.mobile-1.4.2.min.js',
        'js/script.js',
    ];

    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

What am I doing wrong?

Answer 1

It took me a while to figure it out, but below is the relevant part of the Yii2 source code

if ($this->sourcePath !== null && !isset($this->basePath, $this->baseUrl)) {
    list ($this->basePath, $this->baseUrl) = $am->publish($this->sourcePath, $this->publishOptions);
}

So Yii2 will publish assets only if $sourcePath is set, and $basePath and $baseUrl are not set(!). The latter tripped me up, and it looks like the same goes for you.

So I have this AppAsset, which duly publishes

use yii\web\AssetBundle;


class AppAsset extends AssetBundle
{
public $sourcePath = '@app/assets/app';

public $css = [
    'css/openbook.css',
    'fontello/css/fontello.css',
    'fontello/css/animation.css'
];
public $js = [
    'js/plug.openbook.js',
    'js/plug.interpret.js',
    'js/plug.drop.message.js'
];
public $depends = [
   // 'yii\web\YiiAsset', 
   // 'yii\bootstrap\BootstrapAsset',
];
} 

Of course, I have in the main layout

use frontend\assets\AppAsset;
...
AppAsset::register($this);

Answer 2

From personal experience, assets are one of the parts of Yii that I found extremely frustrating.

It is hard to reliably find out where the file is going to be and the switching back and forth with debug mode on and off will create further frustration.

I suggest scrapping the asset handling and just keep all your JS files in a folder, then it can be included like this:

Yii::app()->clientScript->registerScriptFile('/js/jquery.jeditable.mini.js');

Answer 3

to use this AppAsset or any other you should register it in the view

use app\assets\AppAsset;
AppAsset::register($this);

Answer 4

At first, you should create SomeAsset class in your app/assets/ folder with your new js and css files. You can extend your AppAsset overloading its properties.

Next use this in SomeController

use Yii;
use app\assets\SomeAsset;

and in actionSome like this:

SomeAsset::register(Yii::$app->view);