Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
Y
yii2
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
PSDI Army
yii2
Commits
149acbf0
Commit
149acbf0
authored
Feb 25, 2014
by
Carsten Brandt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
edited assets guide
parent
d2d94ab3
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
43 additions
and
21 deletions
+43
-21
assets.md
docs/guide/assets.md
+43
-21
No files found.
docs/guide/assets.md
View file @
149acbf0
...
@@ -2,20 +2,25 @@ Managing assets
...
@@ -2,20 +2,25 @@ Managing assets
===============
===============
An asset in Yii is a file that is included into the page. It could be CSS, JavaScript or
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
any other file.
The framework provides many ways to work with assets from basics such as adding
`<script src="...">`
tags
for a file
that is
[
handled by View
](
view.md
)
section
to advanced usage such as publishing files that are not
for a file
which is covered by the
[
View section
](
view.md
)
,
to advanced usage such as publishing files that are not
under the webservers document root, resolving JavaScript dependencies or minifying CSS.
under the webservers document root, resolving JavaScript dependencies or minifying CSS
, which we will cover in the following
.
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
Declaring asset bundles
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 requir
ed
In order to define a set of assets the belong together and should be used on the website you declare a class call
ed
a
pplication wide. An asset bundle class always extends from
[
[yii\web\AssetBundle
]
]
.
a
n "asset bundle". The bundle defines a set of asset files and their dependencies on other asset bundles
.
Let's review basic application's asset bundle class:
Asset files can be located under the webservers accessable directory but also hidden inside of application or vendor
directories. If the latter, the asset bundle will care for publishing them to a directory accessible by the webserver
so they can be included in the website. This feature is useful for extensions so that they can ship all content in one
directory and make installation easier for you.
To define an asset you create a class extending from
[
[yii\web\AssetBundle
]
] and set the properties according to your needs.
Here you can see an example asset definition which is part of the basic application template, the
`AppAsset`
asset bundle class. It defines assets required application wide:
```
php
```
php
<?php
<?php
...
@@ -39,20 +44,23 @@ class AppAsset extends AssetBundle
...
@@ -39,20 +44,23 @@ class AppAsset extends AssetBundle
```
```
In the above
`$basePath`
specifies web-accessible directory assets are served from. It is a base for relative
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
`$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.
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`
`$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/`
.
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
In case you have asset files under a 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 path to base path prior to being
to specify
`$sourcePath`
instead of
`$basePath`
and
`$baseUrl`
. Files will be copied or symlinked from source path
registered. In case source path is used
`baseUrl`
is generated automatically at the time of publishing asset bundle.
to the
`web/assets`
directory of your application prior to being registered.
In this case
`$basePath`
and
`$baseUrl`
are generated automatically at the time of publishing the asset bundle.
Dependencies on other asset bundles are specified via
`$depends`
property. It is an array that contains fully qualified
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.
class names of bundle classes that should be published in order for this bundle to work properly.
Javascript and CSS files for
`AppAsset`
are added to the header after the files of
[
[yii\web\YiiAsset
]
] and
[
[yii\bootstrap\BootstrapAsset
]
] in this example.
Here
`yii\web\YiiAsset`
adds Yii's JavaScript library while
`yii\bootstrap\BootstrapAsset`
includes
Here
[
[yii\web\YiiAsset
]
] adds Yii's JavaScript library while
[
[yii\bootstrap\BootstrapAsset
]
]
includes
[
Bootstrap
](
http://getbootstrap.com
)
frontend framework.
[
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
Asset bundles are regular classes so if you need to define another one, just create alike class with unique name. This
...
@@ -62,6 +70,9 @@ Additionally you may specify `$jsOptions`, `$cssOptions` and `$publishOptions` t
...
@@ -62,6 +70,9 @@ Additionally you may specify `$jsOptions`, `$cssOptions` and `$publishOptions` t
[
[yii\web\View::registerJsFile()
]
],
[
[yii\web\View::registerCssFile()
]
] and
[
[yii\web\AssetManager::publish()
]
]
[
[yii\web\View::registerJsFile()
]
],
[
[yii\web\View::registerCssFile()
]
] and
[
[yii\web\AssetManager::publish()
]
]
respectively during registering and publising an asset.
respectively during registering and publising an asset.
[
alias
]:
basics.md#path-aliases
"Yii Path alias"
### Language-specific asset bundle
### 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
If you need to define an asset bundle that includes JavaScript file depending on the language you can do it the
...
@@ -82,11 +93,14 @@ class LanguageAsset extends AssetBundle
...
@@ -82,11 +93,14 @@ class LanguageAsset extends AssetBundle
}
}
```
```
Registering asset bundle
Registering asset bundle
------------------------
------------------------
Asset bundle classes are typically registered in views or, if it's main application asset, in layout. Doing it is
Asset bundle classes are typically registered in view files or
[
widgets
](
view.md#widgets
)
that depend on the css or
as simple as:
javascript files for providing its functionality. An exception to this is the
`AppAsset`
class defined above which is
added in the applications main layout file to be registered on any page of the application.
Registering an asset bundle is as simple as calling the
[
[yii\web\AssetBundle::register()|register()
]
] method:
```
php
```
php
use
app\assets\AppAsset
;
use
app\assets\AppAsset
;
...
@@ -94,6 +108,12 @@ AppAsset::register($this);
...
@@ -94,6 +108,12 @@ AppAsset::register($this);
```
```
Since we're in a view context
`$this`
refers to
`View`
class.
Since we're in a view context
`$this`
refers to
`View`
class.
To register an asset inside of a widget, the view instance is available as
`$this->view`
:
```
php
AppAsset
::
register
(
$this
->
view
);
```
Overriding asset bundles
Overriding asset bundles
------------------------
------------------------
...
@@ -118,13 +138,14 @@ return [
...
@@ -118,13 +138,14 @@ return [
];
];
```
```
In the above we're adding asset bundle definitions to
`bundles`
property of asset manager. Keys there
are fully
In the above we're adding asset bundle definitions to
the
[
[yii\web\AssetManager::bundles|bundles
]
] property of asset manager. Keys
are fully
qualified class
path
s to asset bundle classes we want to override while values are key-value arrays of class properties
qualified class
name
s to asset bundle classes we want to override while values are key-value arrays of class properties
and corresponding values to set.
and corresponding values to set.
Setting
`sourcePath`
to
`null`
tells asset manager not to copy anything while
`js`
overrides local files with a link
Setting
`sourcePath`
to
`null`
tells asset manager not to copy anything while
`js`
overrides local files with a link
to CDN.
to CDN.
Enabling symlinks
Enabling symlinks
-----------------
-----------------
...
@@ -146,6 +167,7 @@ return [
...
@@ -146,6 +167,7 @@ return [
There are two main benefits in enabling it. First it is faster since no copying is required and second is that assets
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.
will always be up to date with source files.
Compressing and combining assets
Compressing and combining assets
--------------------------------
--------------------------------
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment