I’m having trouble combining and compressing assets.
Seems that I’m unable to understand what is explained here: http://www.yiiframework.com/doc-2.0/guide-structure-assets.html#combining-compressing-assets
I have a very simple scenario. Three sections:
Main: Uses an AppAsset class that registers common base scripts (this is registered within the layout).
ProductView: The js/css was refactored in order to include what is necessary for this page (on top of the base assets class AppAsset. Here I have a ProductViewAsset which in its $depends instance variable has the AppAsset class configured.
Checkout: Same as above but with its own class (CheckoutAsset) which also depends on AppAsset. Also with custom js/css
What I can see is that under the array "bundles" everything gets compressed and included in the target "app" (the one that does not have any dependency) according to what the docs say. That is as far as I could make it work. Everything is written to app.js and app.css.
But what I would like to achieve is to define (don’t know if it possible) two more targets that include the checkout js/css and the product view assets together with the base js/css. I think that due to caching reasons it is best to include two files on this pages: base and checkout js/css, and on the other side, base and product js/css.
If that is not the case, let’s suppose that is better to combine base+checkout and base+product in different files respectively for those pages I have no idea to do it as well. Cannot understand also that example in the guide where there is backend, shared and frontend js/css and how it is supposed to work.
With the current config I am able to do this but I cannot compress the checkout/product files. I cannot understand exactly what I am doing. It is just trial and error. I’m always having trouble with the depends option in the targets and always getting errors like “Undefined index: frontend\assets\ProductViewAsset” but I have no idea why or what they really mean.
This is the modified assets.php generated via yiic assets/template
return [
//(...)
'bundles' => [
'yii\web\JqueryAsset',
'rmrevin\yii\fontawesome\AssetBundle',
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
'yii\widgets\ActiveFormAsset',
'frontend\assets\ExternalAssets',
'frontend\assets\AppAsset',
//'frontend\assets\CheckoutAsset', //Custom file
//'frontend\assets\ProductViewAsset', //Custom file
],
// Asset bundle for compression output:
'targets' => [
'app' => [
'class' => 'yii\web\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => 'js/app-{hash}.js',
'css' => 'css/app-{hash}.css',
'depends' => [ ],
],
],
// Asset manager configuration:
'assetManager' => [
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
],
];
This outputs this file:
<?php
/**
* This file is generated by the "yii asset" command.
* DO NOT MODIFY THIS FILE DIRECTLY.
* @version 2016-01-02 03:33:22
*/
return [
'app' => [
'class' => 'yii\\web\\AssetBundle',
'basePath' => '@webroot/assets',
'baseUrl' => '@web/assets',
'js' => [
'js/app-a1a521f0c52ad65a207149765fa34a0b.js',
],
'css' => [
'css/app-d0071ef4e2a940fd044de1636f1b63cb.css',
],
],
'yii\\web\\JqueryAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'app',
],
],
'rmrevin\\yii\\fontawesome\\AssetBundle' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'app',
],
],
'yii\\web\\YiiAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'yii\\web\\JqueryAsset',
'app',
],
],
'yii\\bootstrap\\BootstrapAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'app',
],
],
'yii\\bootstrap\\BootstrapPluginAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'yii\\web\\JqueryAsset',
'yii\\bootstrap\\BootstrapAsset',
'app',
],
],
'yii\\widgets\\ActiveFormAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'yii\\web\\YiiAsset',
'app',
],
],
'\\rmrevin\\yii\\fontawesome\\AssetBundle' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'app',
],
],
'frontend\\assets\\ExternalAssets' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'\\rmrevin\\yii\\fontawesome\\AssetBundle',
'yii\\web\\YiiAsset',
'yii\\bootstrap\\BootstrapAsset',
'app',
],
],
'frontend\\assets\\AppAsset' => [
'sourcePath' => null,
'js' => [],
'css' => [],
'depends' => [
'frontend\\assets\\ExternalAssets',
'app',
],
],
];
Every bit of light you can shed on this matter is welcomed! Thanks!
