前端资源（Assets）

资源包Yii框架定义许多资源包，如下资源包是最常用，可在你的应用或扩展代码中引用它们。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 文件来支持Bootstrap JavaScript插件。yii\jui\JuiAsset: 包含从jQuery UI库的CSS 和 JavaScript 文件。如果你的代码需要jQuery, jQuery UI 或 Bootstrap，应尽量使用这些预定义资源包而非自己创建， 如果这些包的默认配置不能满足你的需求，可以自定义配置，详情参考自定义资源包。资源转换除了直接编写CSS 和/或 JavaScript代码，开发人员经常使用扩展语法来编写，再使用特殊的工具将它们转换成CSS/Javascript。 例如，对于CSS代码可使用LESS?或?SCSS， 对于JavaScript 可使用?TypeScript。可将使用扩展语法的资源文件列到资源包的yii\web\AssetBundle::css 和 yii\web\AssetBundle::js中，如下所示：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', ];}当在视图中注册一个这样的资源包，yii\web\AssetManager资源管理器会自动运行预处理工具将使用扩展语法 的资源转换成CSS/JavaScript，当视图最终渲染页面时，在页面中包含的是CSS/Javascipt文件，而不是原始的扩展语法代码文件。Yii使用文件扩展名来表示资源使用哪种扩展语法，默认可以识别如下语法和文件扩展名：LESS:?.lessSCSS:?.scssStylus:?.stylCoffeeScript:?.coffeeTypeScript:?.tsYii依靠安装的预处理工具来转换资源，例如，为使用LESS，应安装lessc?预处理命令。可配置yii\web\AssetManager::converter自定义预处理命令和支持的扩展语法，如下所示：return [ 'components' => [ 'assetManager' => [ 'converter' => [ 'class' => 'yii\web\AssetConverter', 'commands' => [ 'less' => ['css', 'lessc {from} {to} --no-color'], 'ts' => ['js', 'tsc --out {to} {from}'], ], ], ], ],];如上所示，通过yii\web\AssetConverter::commands 属性指定支持的扩展语法， 数组的键为文件扩展名（前面不要.），数组的值为目标资源文件扩展名和执行资源转换的命令， 命令中的标记?{from}?和{to}会分别被源资源文件路径和目标资源文件路径替代。补充: 除了以上方式，也有其他的方式来处理扩展语法资源，例如，可使用编译工具如grunt?来监控并自动转换扩展语法资源，此时，应使用资源包中编译后的CSS/Javascript文件而不是原始文件。合并和压缩资源一个Web页面可以包含很多CSS 和/或 JavaScript 文件，为减少HTTP 请求和这些下载文件的大小， 通常的方式是在页面中合并并压缩多个CSS/JavaScript 文件为一个或很少的几个文件，并使用压缩后的文件而不是原始文件。补充: 合并和压缩资源通常在应用在产品上线模式，在开发模式下使用原始的CSS/JavaScript更方便调试。接下来介绍一种合并和压缩资源文件而不需要修改已有代码的方式：找出应用中所有你想要合并和压缩的资源包，将这些包分成一个或几个组，注意每个包只能属于其中一个组，合并/压缩每个组里CSS文件到一个文件，同样方式处理JavaScript文件，为每个组定义新的资源包：设置yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 属性分别为压缩后的CSS和JavaScript文件；自定义设置每个组内的资源包，设置资源包的yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 属性为空, 并设置它们的 yii\web\AssetBundle::depends 属性为每个组新创建的资源包。使用这种方式，当在视图中注册资源包时，会自动触发原始包所属的组资源包的注册，然后，页面就会包含以合并/压缩的资源文件， 而不是原始文件。示例使用一个示例来解释以上这种方式：鉴定你的应用有两个页面X 和 Y，页面X使用资源包A，B和C，页面Y使用资源包B，C和D。有两种方式划分这些资源包，一种使用一个组包含所有资源包，另一种是将（A,B,C）放在组X，（B，C，C）放在组Y， 哪种方式更好？第一种方式优点是两个页面使用相同的已合并CSS和JavaScript文件使HTTP缓存更高效，另一方面，由于单个组包含所有文件， 已合并的CSS和Javascipt文件会更大，因此会增加文件传输时间，在这个示例中，我们使用第一种方式，也就是用一个组包含所有包。补充: 将资源包分组并不是无价值的，通常要求分析现实中不同页面各种资源的数据量，开始时为简便使用一个组。在所有包中使用工具(例如?Closure Compiler,?YUI Compressor) 来合并和压缩CSS和JavaScript文件， 注意合并后的文件满足包间的先后依赖关系，例如，如果包A依赖B，B依赖C和D，那么资源文件列表以C和D开始，然后为B最后为A。合并和压缩之后，会得到一个CSS文件和一个JavaScript文件，假定它们的名称为all-xyz.css?和?all-xyz.js，?xyz?为使文件名唯一以避免HTTP缓存问题的时间戳或哈希值。现在到最后一步了，在应用配置中配置yii\web\AssetManager 资源管理器如下所示：return [ 'components' => [ 'assetManager' => [ 'bundles' => [ 'all' => [ 'class' => 'yii\web\AssetBundle', 'basePath' => '@webroot/assets', 'baseUrl' => '@web/assets', 'css' => ['all-xyz.css'], 'js' => ['all-xyz.js'], ], 'A' => ['css' => [], 'js' => [], 'depends' => ['all']], 'B' => ['css' => [], 'js' => [], 'depends' => ['all']],