mirror of
https://github.com/yiisoft/yii2.git
synced 2025-11-03 22:32:40 +08:00
Update structure-assets.md
This commit is contained in:
@ -40,6 +40,7 @@ class AppAsset extends AssetBundle
|
||||
public $baseUrl = '@web';
|
||||
public $css = [
|
||||
'css/site.css',
|
||||
['css/print.css', 'media' => 'print'],
|
||||
];
|
||||
public $js = [
|
||||
];
|
||||
@ -55,37 +56,38 @@ class AppAsset extends AssetBundle
|
||||
依赖其他两个包 [[yii\web\YiiAsset]] 和 [[yii\bootstrap\BootstrapAsset]],
|
||||
关于 [[yii\web\AssetBundle]] 的属性的更多详细如下所述:
|
||||
|
||||
* [[yii\web\AssetBundle::sourcePath|sourcePath]]: 指定包包含资源文件的根目录,
|
||||
* [[yii\web\AssetBundle::sourcePath|sourcePath]]:指定包包含资源文件的根目录,
|
||||
当根目录不能被 Web 访问时该属性应设置,否则,应设置
|
||||
[[yii\web\AssetBundle::basePath|basePath]] 属性和 [[yii\web\AssetBundle::baseUrl|baseUrl]]。
|
||||
[路径别名](concept-aliases.md) 可在此处使用;
|
||||
* [[yii\web\AssetBundle::basePath|basePath]]: 指定包含资源包中资源文件并可Web访问的目录,
|
||||
* [[yii\web\AssetBundle::basePath|basePath]]:指定包含资源包中资源文件并可Web访问的目录,
|
||||
当指定 [[yii\web\AssetBundle::sourcePath|sourcePath]] 属性,
|
||||
[资源管理器](#asset-manager) 会发布包的资源到一个可 Web 访问并覆盖该属性,
|
||||
如果你的资源文件在一个 Web 可访问目录下,应设置该属性,这样就不用再发布了。
|
||||
[路径别名](concept-aliases.md) 可在此处使用。
|
||||
* [[yii\web\AssetBundle::baseUrl|baseUrl]]: 指定对应到[[yii\web\AssetBundle::basePath|basePath]]目录的URL,
|
||||
* [[yii\web\AssetBundle::baseUrl|baseUrl]]:指定对应到 [[yii\web\AssetBundle::basePath|basePath]] 目录的 URL,
|
||||
和 [[yii\web\AssetBundle::basePath|basePath]] 类似,
|
||||
如果你指定 [[yii\web\AssetBundle::sourcePath|sourcePath]] 属性,
|
||||
[资源管理器](#asset-manager) 会发布这些资源并覆盖该属性,[路径别名](concept-aliases.md) 可在此处使用。
|
||||
* [[yii\web\AssetBundle::js|js]]: 一个包含该资源包JavaScript文件的数组,
|
||||
注意正斜杠"/"应作为目录分隔符,
|
||||
* [[yii\web\AssetBundle::css|css]]:列出此包中包含的 CSS 文件的数组。
|
||||
请注意,只应使用正斜杠“/”作为目录分隔符。每个文件都可以单独指定为字符串,
|
||||
也可以与属性标记及其值一起指定在数组中。
|
||||
* [[yii\web\AssetBundle::js|js]]:列出此包中包含的 JavaScript 文件的数组。
|
||||
请注意,只应使用正斜杠“/”作为目录分隔符。
|
||||
每个 JavaScript 文件可指定为以下两种格式之一:
|
||||
- 相对路径表示为本地 JavaScript 文件 (如 `js/main.js`),文件实际的路径在该相对路径前加上
|
||||
[[yii\web\AssetManager::basePath]],文件实际的 URL
|
||||
在该路径前加上 [[yii\web\AssetManager::baseUrl]]。
|
||||
- 绝对 URL 地址表示为外部 JavaScript 文件,如
|
||||
`http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js` 或
|
||||
`//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js`.
|
||||
* [[yii\web\AssetBundle::css|css]]: 一个包含该资源包CSS文件的数组,
|
||||
该数组格式和 [[yii\web\AssetBundle::js|js]] 相同。
|
||||
* [[yii\web\AssetBundle::depends|depends]]: 一个列出该资源包依赖的
|
||||
`//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js`。
|
||||
* [[yii\web\AssetBundle::depends|depends]]:一个列出该资源包依赖的
|
||||
其他资源包(后两节有详细介绍)。
|
||||
* [[yii\web\AssetBundle::jsOptions|jsOptions]]: 当调用[[yii\web\View::registerJsFile()]]注册该包 *每个* JavaScript文件时,
|
||||
* [[yii\web\AssetBundle::jsOptions|jsOptions]]:当调用[[yii\web\View::registerJsFile()]]注册该包 *每个* JavaScript 文件时,
|
||||
指定传递到该方法的选项。
|
||||
* [[yii\web\AssetBundle::cssOptions|cssOptions]]: 当调用[[yii\web\View::registerCssFile()]]注册该包 *每个* css文件时,
|
||||
* [[yii\web\AssetBundle::cssOptions|cssOptions]]:当调用[[yii\web\View::registerCssFile()]]注册该包 *每个* css 文件时,
|
||||
指定传递到该方法的选项。
|
||||
* [[yii\web\AssetBundle::publishOptions|publishOptions]]: 当调用[[yii\web\AssetManager::publish()]]发布该包资源文件到Web目录时
|
||||
* [[yii\web\AssetBundle::publishOptions|publishOptions]]:当调用 [[yii\web\AssetManager::publish()]] 发布该包资源文件到 Web 目录时
|
||||
指定传递到该方法的选项,仅在指定了
|
||||
[[yii\web\AssetBundle::sourcePath|sourcePath]] 属性时使用。
|
||||
|
||||
@ -98,8 +100,8 @@ class AppAsset extends AssetBundle
|
||||
它们要拷贝到一个可 Web 访问的 Web 目录中
|
||||
成为发布的资源,这个过程称为*发布资源*,随后会详细介绍。
|
||||
* 发布资源: 资源文件放在可通过 Web 直接访问的 Web 目录中;
|
||||
* 外部资源: 资源文件放在与你的Web应用不同
|
||||
的Web服务器上;
|
||||
* 外部资源: 资源文件放在与你的 Web 应用不同的
|
||||
Web 服务器上;
|
||||
|
||||
当定义资源包类时候,如果你指定了[[yii\web\AssetBundle::sourcePath|sourcePath]] 属性,
|
||||
就表示任何使用相对路径的资源会被当作源资源;
|
||||
@ -203,22 +205,92 @@ class FontAwesomeAsset extends AssetBundle
|
||||
通过配置发布选项的 only 下标,只有 `fonts` 和 `css` 子目录会发布。
|
||||
|
||||
|
||||
### Bower 和 NPM 资源 <span id="bower-npm-assets"></span>
|
||||
### Bower 和 NPM 资源安装 <span id="bower-npm-assets"></span>
|
||||
|
||||
大多数 JavaScript/CSS 包通过[Bower](http://bower.io/) 和/或
|
||||
[NPM](https://www.npmjs.org/)管理,
|
||||
如果你的应用或扩展使用这些包,推荐你遵循以下步骤来管理库中的资源:
|
||||
Most JavaScript/CSS packages are managed by [Bower](http://bower.io/) and/or [NPM](https://www.npmjs.org/) package
|
||||
managers. In PHP world we have Composer, that manages PHP dependencies, but it is possible to load
|
||||
both Bower and NPM packages using `composer.json` just as PHP packages.
|
||||
|
||||
1. 修改应用或扩展的 `composer.json` 文件将包列入`require` 中,
|
||||
应使用`bower-asset/PackageName` (Bower包)
|
||||
或 `npm-asset/PackageName` (NPM包)来对应库。
|
||||
2. 创建一个资源包类并将你的应用或扩展要使用的JavaScript/CSS 文件列入到类中,
|
||||
应设置 [[yii\web\AssetBundle::sourcePath|sourcePath]] 属性为`@bower/PackageName` 或 `@npm/PackageName`,
|
||||
因为根据别名Composer会安装Bower或NPM包到对应的目录下。
|
||||
To achieve this, we should configure our composer a bit. There are two options to do that:
|
||||
|
||||
> Note: 一些包会将它们分布式文件放到一个子目录中,对于这种情况,应指定子目录作为
|
||||
[[yii\web\AssetBundle::sourcePath|sourcePath]]属性值,
|
||||
例如,[[yii\web\JqueryAsset]]使用 `@bower/jquery/dist` 而不是 `@bower/jquery`。
|
||||
___
|
||||
|
||||
#### Using asset-packagist repository
|
||||
|
||||
This way will satisfy requirements of the majority of projects, that need NPM or Bower packages.
|
||||
|
||||
> Note: Since 2.0.13 both Basic and Advanced application templates are pre-configured to use asset-packagist
|
||||
by default, so you can skip this section.
|
||||
|
||||
In the `composer.json` of your project, add the following lines:
|
||||
|
||||
```json
|
||||
"repositories": [
|
||||
{
|
||||
"type": "composer",
|
||||
"url": "https://asset-packagist.org"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Adjust `@npm` and `@bower` [aliases](concept-aliases.md) in you [application configuration](concept-configurations.md):
|
||||
|
||||
```php
|
||||
$config = [
|
||||
...
|
||||
'aliases' => [
|
||||
'@bower' => '@vendor/bower-asset',
|
||||
'@npm' => '@vendor/npm-asset',
|
||||
],
|
||||
...
|
||||
];
|
||||
```
|
||||
|
||||
Visit [asset-packagist.org](https://asset-packagist.org) to know, how it works.
|
||||
|
||||
#### Using fxp/composer-asset-plugin
|
||||
|
||||
Compared to asset-packagist, composer-asset-plugin does not require any changes to application config. Instead, it
|
||||
requires global installation of a special Composer plugin by running the following command:
|
||||
|
||||
```bash
|
||||
composer global require "fxp/composer-asset-plugin:^1.4.1"
|
||||
```
|
||||
|
||||
This command installs [composer asset plugin](https://github.com/francoispluchino/composer-asset-plugin/) globally
|
||||
which allows managing Bower and NPM package dependencies through Composer. After the plugin installation,
|
||||
every single project on your computer will support Bower and NPM packages through `composer.json`.
|
||||
|
||||
Add the following lines to `composer.json` of your project to adjust directories where the installed packages
|
||||
will be placed, if you want to publish them using Yii:
|
||||
|
||||
```json
|
||||
"config": {
|
||||
"asset-installer-paths": {
|
||||
"npm-asset-library": "vendor/npm",
|
||||
"bower-asset-library": "vendor/bower"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Note: `fxp/composer-asset-plugin` significantly slows down the `composer update` command in comparison
|
||||
to asset-packagist.
|
||||
|
||||
____
|
||||
|
||||
After configuring Composer to support Bower and NPM:
|
||||
|
||||
1. Modify the `composer.json` file of your application or extension and list the package in the `require` entry.
|
||||
You should use `bower-asset/PackageName` (for Bower packages) or `npm-asset/PackageName` (for NPM packages)
|
||||
to refer to the library.
|
||||
2. Run `composer update`
|
||||
3. Create an asset bundle class and list the JavaScript/CSS files that you plan to use in your application or extension.
|
||||
You should specify the [[yii\web\AssetBundle::sourcePath|sourcePath]] property as `@bower/PackageName` or `@npm/PackageName`.
|
||||
This is because Composer will install the Bower or NPM package in the directory corresponding to this alias.
|
||||
|
||||
> Note: Some packages may put all their distributed files in a subdirectory. If this is the case, you should specify
|
||||
the subdirectory as the value of [[yii\web\AssetBundle::sourcePath|sourcePath]]. For example, [[yii\web\JqueryAsset]]
|
||||
uses `@bower/jquery/dist` instead of `@bower/jquery`.
|
||||
|
||||
|
||||
## 使用资源包 <span id="using-asset-bundles"></span>
|
||||
@ -231,7 +303,8 @@ use app\assets\AppAsset;
|
||||
AppAsset::register($this); // $this 代表视图对象
|
||||
```
|
||||
|
||||
> Info: [[yii\web\AssetBundle::register()]] 方法返回资源包对象,该对象包含了发布资源的信息比如 [[yii\web\AssetBundle::basePath|basePath]] 或 [[yii\web\AssetBundle::baseUrl|baseUrl]]。
|
||||
> Info: [[yii\web\AssetBundle::register()]] 方法返回资源包对象,该对象包含了发布资源的信息比如
|
||||
[[yii\web\AssetBundle::basePath|basePath]] 或 [[yii\web\AssetBundle::baseUrl|baseUrl]]。
|
||||
|
||||
如果在其他地方注册资源包,应提供视图对象,如在 [小部件](structure-widgets.md) 类中注册资源包,
|
||||
可以通过 `$this->view` 获取视图对象。
|
||||
@ -244,6 +317,49 @@ AppAsset::register($this); // $this 代表视图对象
|
||||
[[yii\web\AssetBundle::css]] 和 [[yii\web\AssetBundle::js]] 的列出来的前后顺序。
|
||||
|
||||
|
||||
### Dynamic Asset Bundles <span id="dynamic-asset-bundles"></span>
|
||||
|
||||
Being a regular PHP class asset bundle can bear some extra logic related to it and may adjust its internal parameters dynamically.
|
||||
For example: you may use some sophisticated JavaScript library, which provides some internationalization packed in separated
|
||||
source files: each per each supported language. Thus you will need to add particular '.js' file to your page in order to
|
||||
make library translation work. This can be achieved overriding [[yii\web\AssetBundle::init()]] method:
|
||||
|
||||
```php
|
||||
namespace app\assets;
|
||||
|
||||
use yii\web\AssetBundle;
|
||||
use Yii;
|
||||
|
||||
class SophisticatedAssetBundle extends AssetBundle
|
||||
{
|
||||
public $sourcePath = '/path/to/sophisticated/src';
|
||||
public $js = [
|
||||
'sophisticated.js' // file, which is always used
|
||||
];
|
||||
|
||||
public function init()
|
||||
{
|
||||
parent::init();
|
||||
$this->js[] = 'i18n/' . Yii::$app->language . '.js'; // dynamic file added
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Particular asset bundle can also be adjusted via its instance returned by [[yii\web\AssetBundle::register()]].
|
||||
For example:
|
||||
|
||||
```php
|
||||
use app\assets\SophisticatedAssetBundle;
|
||||
use Yii;
|
||||
|
||||
$bundle = SophisticatedAssetBundle::register(Yii::$app->view);
|
||||
$bundle->js[] = 'i18n/' . Yii::$app->language . '.js'; // dynamic file added
|
||||
```
|
||||
|
||||
> Note: although dynamic adjustment of the asset bundles is supported, it is a **bad** practice, which may lead to
|
||||
unexpected side effects, and should be avoided if possible.
|
||||
|
||||
|
||||
### 自定义资源包 <span id="customizing-asset-bundles"></span>
|
||||
|
||||
Yii 通过名为 `assetManager`的应用组件实现 [[yii\web\AssetManager]] 来管理应用组件,
|
||||
@ -305,8 +421,57 @@ return [
|
||||
|
||||
可设置 [[yii\web\AssetManager::bundles]] 为 `false` 禁用 *所有* 的资源包。
|
||||
|
||||
Keep in mind that customization made via [[yii\web\AssetManager::bundles]] is applied at the creation of the asset bundle, e.g.
|
||||
at object constructor stage. Thus any adjustments made to the bundle object after that will override the mapping setup at [[yii\web\AssetManager::bundles]] level.
|
||||
In particular: adjustments made inside [[yii\web\AssetBundle::init()]]
|
||||
method or over the registered bundle object will take precedence over `AssetManager` configuration.
|
||||
Here are the examples, where mapping set via [[yii\web\AssetManager::bundles]] makes no effect:
|
||||
|
||||
### 资源部署 <span id="asset-mapping"></span>
|
||||
```php
|
||||
// Program source code:
|
||||
|
||||
namespace app\assets;
|
||||
|
||||
use yii\web\AssetBundle;
|
||||
use Yii;
|
||||
|
||||
class LanguageAssetBundle extends AssetBundle
|
||||
{
|
||||
// ...
|
||||
|
||||
public function init()
|
||||
{
|
||||
parent::init();
|
||||
$this->baseUrl = '@web/i18n/' . Yii::$app->language; // can NOT be handled by `AssetManager`!
|
||||
}
|
||||
}
|
||||
// ...
|
||||
|
||||
$bundle = \app\assets\LargeFileAssetBundle::register(Yii::$app->view);
|
||||
$bundle->baseUrl = YII_DEBUG ? '@web/large-files': '@web/large-files/minified'; // can NOT be handled by `AssetManager`!
|
||||
|
||||
|
||||
// Application config :
|
||||
|
||||
return [
|
||||
// ...
|
||||
'components' => [
|
||||
'assetManager' => [
|
||||
'bundles' => [
|
||||
'app\assets\LanguageAssetBundle' => [
|
||||
'baseUrl' => 'http://some.cdn.com/files/i18n/en' // makes NO effect!
|
||||
],
|
||||
'app\assets\LargeFileAssetBundle' => [
|
||||
'baseUrl' => 'http://some.cdn.com/files/large-files' // makes NO effect!
|
||||
],
|
||||
],
|
||||
],
|
||||
],
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
### 资源映射 <span id="asset-mapping"></span>
|
||||
|
||||
有时你想"修复" 多个资源包中资源文件的错误/不兼容,例如包A使用1.11.1版本的`jquery.min.js`,
|
||||
包B使用2.1.1版本的`jquery.js`,可自定义每个包来解决这个问题,
|
||||
@ -366,12 +531,12 @@ return [
|
||||
这比拷贝文件方式快并能确保发布的资源一直为最新的。
|
||||
|
||||
|
||||
### 打破缓存 <span id="cache-busting"></span>
|
||||
### 清除缓存 <span id="cache-busting"></span>
|
||||
|
||||
对于运行在生产模式的 Web 应用来说,通常的做法是为资源包和其他静态资源开启 http 缓存。
|
||||
但这种做法有个不好的地方就是,当你更新某个资源并部署到生产环境时,
|
||||
用户的客户端可能由于 http 缓存而仍然使用旧版本的资源。
|
||||
为了克服该不足,你可以试试打破缓存特性,它由2.0.3版本引入,只需如下配置 [[yii\web\AssetManager]] 即可:
|
||||
为了克服该不足,你可以试试清除缓存特性,它由 2.0.3 版本引入,只需如下配置 [[yii\web\AssetManager]] 即可:
|
||||
|
||||
```php
|
||||
return [
|
||||
@ -395,15 +560,16 @@ return [
|
||||
Yii框架定义许多资源包,如下资源包是最常用,
|
||||
可在你的应用或扩展代码中引用它们。
|
||||
|
||||
- [[yii\web\YiiAsset]]: 主要包含`yii.js` 文件,该文件完成模块JavaScript代码组织功能,
|
||||
- [[yii\web\YiiAsset]]:主要包含 `yii.js` 文件,该文件完成模块 JavaScript 代码组织功能,
|
||||
也为 `data-method` 和 `data-confirm` 属性提供特别支持和其他有用的功能。
|
||||
- [[yii\web\JqueryAsset]]: 包含从jQuery bower 包的`jquery.js`文件。
|
||||
- [[yii\bootstrap\BootstrapAsset]]: 包含从Twitter Bootstrap 框架的CSS文件。
|
||||
- [[yii\bootstrap\BootstrapPluginAsset]]: 包含从Twitter Bootstrap 框架的JavaScript 文件
|
||||
有关 `yii.js` 的更多信息可以在 [客户端脚本部分](output-client-scripts.md#yii.js) 中找到。
|
||||
- [[yii\web\JqueryAsset]]:包含从 jQuery bower 包的 `jquery.js` 文件。
|
||||
- [[yii\bootstrap\BootstrapAsset]]:包含从 Twitter Bootstrap 框架的CSS文件。
|
||||
- [[yii\bootstrap\BootstrapPluginAsset]]:包含从 Twitter Bootstrap 框架的 JavaScript 文件
|
||||
来支持 Bootstrap JavaScript 插件。
|
||||
- [[yii\jui\JuiAsset]]: 包含从jQuery UI库的CSS 和 JavaScript 文件。
|
||||
- [[yii\jui\JuiAsset]]:包含从 jQuery UI 库的 CSS 和 JavaScript 文件。
|
||||
|
||||
如果你的代码需要jQuery, jQuery UI 或 Bootstrap,应尽量使用这些预定义资源包而非自己创建,
|
||||
如果你的代码需要 jQuery,jQuery UI 或 Bootstrap,应尽量使用这些预定义资源包而非自己创建,
|
||||
如果这些包的默认配置不能满足你的需求,可以自定义配置,
|
||||
详情参考[自定义资源包](#customizing-asset-bundles)。
|
||||
|
||||
@ -442,11 +608,11 @@ class AppAsset extends AssetBundle
|
||||
Yii 使用文件扩展名来表示资源使用哪种扩展语法,
|
||||
默认可以识别如下语法和文件扩展名:
|
||||
|
||||
- [LESS](http://lesscss.org/): `.less`
|
||||
- [SCSS](http://sass-lang.com/): `.scss`
|
||||
- [Stylus](http://learnboost.github.io/stylus/): `.styl`
|
||||
- [CoffeeScript](http://coffeescript.org/): `.coffee`
|
||||
- [TypeScript](http://www.typescriptlang.org/): `.ts`
|
||||
- [LESS](http://lesscss.org/):`.less`
|
||||
- [SCSS](http://sass-lang.com/):`.scss`
|
||||
- [Stylus](http://learnboost.github.io/stylus/):`.styl`
|
||||
- [CoffeeScript](http://coffeescript.org/):`.coffee`
|
||||
- [TypeScript](http://www.typescriptlang.org/):`.ts`
|
||||
|
||||
Yii 依靠安装的预处理工具来转换资源,例如,
|
||||
为使用 [LESS](http://lesscss.org/),应安装 `lessc` 预处理命令。
|
||||
@ -515,7 +681,7 @@ return [
|
||||
假定你的应用有两个页面 X 和 Y,页面 X 使用资源包 A,B 和 C,页面 Y 使用资源包 B,C 和 D。
|
||||
|
||||
有两种方式划分这些资源包,一种使用一个组包含所有资源包,
|
||||
另一种是将(A,B,C)放在组X,(B,C,D)放在组Y,
|
||||
另一种是将(A,B,C)放在组 X,(B,C,D)放在组 Y,
|
||||
哪种方式更好?第一种方式优点是两个页面使用相同的已合并 CSS 和 JavaScrip t文件使 HTTP 缓存更高效,
|
||||
另一方面,由于单个组包含所有文件,
|
||||
已合并的 CSS 和 Javascipt 文件会更大,因此会增加文件传输时间,在这个示例中,
|
||||
@ -524,7 +690,7 @@ return [
|
||||
> Info: 将资源包分组并不是无价值的,通常要求分析现实中不同页面各种资源的数据量,
|
||||
开始时为简便使用一个组。
|
||||
|
||||
在所有包中使用工具(例如 [Closure Compiler](https://developers.google.com/closure/compiler/),
|
||||
在所有包中使用工具(例如 [Closure Compiler](https://developers.google.com/closure/compiler/),
|
||||
[YUI Compressor](https://github.com/yui/yuicompressor/)) 来合并和压缩 CSS 和 JavaScript 文件,
|
||||
注意合并后的文件满足包间的先后依赖关系,
|
||||
例如,如果包 A 依赖 B,B 依赖 C 和 D,那么资源文件列表以 C 和 D 开始,
|
||||
@ -582,6 +748,11 @@ return [
|
||||
如上所示,在产品上线模式下资源包数组存储在 `assets-prod.php` 文件中,
|
||||
不是产品上线模式存储在 `assets-dev.php` 文件中。
|
||||
|
||||
> Note: this asset combining mechanism is based on the ability of [[yii\web\AssetManager::bundles]] to override the properties
|
||||
of the registered asset bundles. However, as it already has been said above, this ability does not cover asset bundle
|
||||
adjustments, which are performed at [[yii\web\AssetBundle::init()]] method or after bundle is registered. You should
|
||||
avoid usage of such dynamic bundles during the asset combining.
|
||||
|
||||
|
||||
### 使用 `asset` 命令 <span id="using-asset-command"></span>
|
||||
|
||||
@ -609,6 +780,8 @@ return [
|
||||
'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
|
||||
// 为CSS文件压缩修改command/callback
|
||||
'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
|
||||
// 是否在压缩后删除资源来源:
|
||||
'deleteSource' => false,
|
||||
// 要压缩的资源包列表
|
||||
'bundles' => [
|
||||
// 'yii\web\YiiAsset',
|
||||
@ -634,7 +807,7 @@ return [
|
||||
在 `targets` 选项中应指定这些包如何分组,
|
||||
如前述的可以指定一个或多个组。
|
||||
|
||||
> Note: 由于在控制台应用别名 `@webroot` and `@web` 不可用,
|
||||
> Note: 由于在控制台应用别名 `@webroot` 和 `@web` 不可用,
|
||||
应在配置中明确指定它们。
|
||||
|
||||
JavaScript 文件会被合并压缩后写入到 `js/all-{hash}.js` 文件,
|
||||
@ -647,7 +820,7 @@ Yii默认使用[Closure Compiler](https://developers.google.com/closure/compiler
|
||||
|
||||
|
||||
根据配置文件,可执行 `asset` 命令来合并和压缩资源文件
|
||||
并生成一个新的资源包配置文件`assets-prod.php`:
|
||||
并生成一个新的资源包配置文件 `assets-prod.php`:
|
||||
|
||||
```
|
||||
yii asset assets.php config/assets-prod.php
|
||||
@ -656,17 +829,29 @@ yii asset assets.php config/assets-prod.php
|
||||
生成的配置文件可以在应用配置中包含,
|
||||
如最后一小节所描述的。
|
||||
|
||||
> Note: in case you customize asset bundles for your application via [[yii\web\AssetManager::bundles]] or
|
||||
[[yii\web\AssetManager::assetMap]] and want this customization to be applied for the compression source files,
|
||||
you should include these options to the `assetManager` section inside asset command configuration file.
|
||||
|
||||
> Info: 使用`asset` 命令并不是唯一一种自动合并和压缩过程的方法,
|
||||
可使用优秀的工具[grunt](http://gruntjs.com/)来完成这个过程。
|
||||
> Note: while specifying the compression source, you should avoid the use of asset bundles whose parameters may be
|
||||
adjusted dynamically (e.g. at `init()` method or after registration), since they may work incorrectly after compression.
|
||||
|
||||
|
||||
> Info: Using the `asset` command is not the only option to automate the asset combining and compressing process.
|
||||
You can use the excellent task runner tool [grunt](http://gruntjs.com/) to achieve the same goal.
|
||||
|
||||
|
||||
### 资源包分组 <span id="grouping-asset-bundles"></span>
|
||||
|
||||
上一小节,介绍了如何压缩所有的资源包到一个文件,减少对应用中引用资源文件的 http 请求数,但是在实践中很少这样做。比如,应用有一个“前端”和一个“后端”,每一个都用了一个不同js和css文件集合。在这种情况下,把所有的资源包压缩到一个文件毫无意义,“前端”不会用到“后端”的资源文件,当请求“前端”页面时,“后端”的资源文件也会被发送过来,浪费网络带宽。
|
||||
上一小节,介绍了如何压缩所有的资源包到一个文件,
|
||||
减少对应用中引用资源文件的 http 请求数,但是在实践中很少这样做。
|
||||
比如,应用有一个“前端”和一个“后端”,
|
||||
每一个都用了一个不同 js 和 css 文件集合。
|
||||
在这种情况下,把所有的资源包压缩到一个文件毫无意义,“前端”不会用到“后端”的资源文件,
|
||||
当请求“前端”页面时,“后端”的资源文件也会被发送过来,浪费网络带宽。
|
||||
|
||||
为了解决这个问题,可以吧资源包分成若干组,每个组里面有若干个资源包。下面的配置展示了如何对资源包分组:
|
||||
为了解决这个问题,可以吧资源包分成若干组,每个组里面有若干个资源包。
|
||||
下面的配置展示了如何对资源包分组:
|
||||
|
||||
```php
|
||||
return [
|
||||
|
||||
Reference in New Issue
Block a user