yii2 Asset 资源管理
yii2 2017-08-03 10:43:04

1、自定义依赖包：

PHP Code复制内容到剪贴板
  1. return [  
  2.     'components' => [  
  3.         'assetManager' => [  
  4.             /*重新定义资源包*/  
  5.             'bundles' => [  
  6.                 //'yii\bootstrap\BootstrapAsset' => false,     //禁用资源包  
  7.                 'yii\bootstrap\BootstrapAsset' => [  
  8.                     'sourcePath' => '@frontend/themes/jiancai/static',  
  9.                     'css'=>[  
  10.                         'css/bootstrap.css'  
  11.                     ],  
  12.                     'js' => [  
  13.                         'js/bootstrap.min.js'  
  14.                     ]  
  15.                 ],  
  16.             ],  
  17.         ],  

YII中很多组件依赖于bootstrap，如果依赖包与本身的有出入，可自定义一下，不使用框架本身的，也可以禁用资源包

 

另一种方式，使用自定义的类直接覆盖掉：

在config下的bootstrap中这样写，用自定义的类覆盖指定的依赖包

PHP Code复制内容到剪贴板
  1. Yii::$classMap['yii\helpers\Html'] = '@common/yii/helpers/Html.php';  

 

注册CSS JS 位置 / 注册css js

PHP Code复制内容到剪贴板
  1. public $jsOptions = ['position' => \yii\web\View::POS_HEAD];   

这一句通常不需要，将JS注册进头部

 

完整的一次asset：

PHP Code复制内容到剪贴板
  1. <?php  
  2.   
  3. namespace frontend\themes\jiancai\assets;  
  4.   
  5. use yii\web\AssetBundle;  
  6.   
  7.   
  8. class AppAsset extends AssetBundle  
  9. {  
  10.     public $sourcePath = '@jiancai/static';  
  11.   
  12.     public $css = [  
  13.         'css/theme.css'  
  14.     ];  
  15.     public $js = [  
  16.         'js/common.js'  
  17.     ];  
  18.     public $depends = [  
  19.         'yii\web\YiiAsset',  
  20.         'yii\bootstrap\BootstrapAsset',  
  21.         'yii\jui\JuiAsset',  
  22.         'common\assets\LayuiAsset'//自定义  
  23.     ];  
  24.   
  25. }  

视图中使用：

PHP Code复制内容到剪贴板
  1. use frontend\themes\jiancai\assets\AppAsset;  
  2. AppAsset::register($this);  

 

 

在页面中单独写样式

PHP Code复制内容到剪贴板
  1. $cssString = ".gray-bg{color:red;}";    
  2. $this->registerCss($cssString);   

 

在页面中单独写JS(使用数据块)

PHP Code复制内容到剪贴板
  1. <div id="mybutton">点我弹出OK</div>    
  2.     
  3. <?php $this->beginBlock('test') ?>    
  4.     $(function($) {    
  5.       $('#mybutton').click(function() {    
  6.         alert('OK');    
  7.       });    
  8.     });    
  9. <?php $this->endBlock() ?>    
  10. <?php $this->registerJs($this->blocks['test'], \yii\web\View::POS_END); ?>    

 

将JS 注册到页面底部(eot空格删掉)

PHP Code复制内容到剪贴板
  1. <?php  
  2. $js = <<<'EOT'  
  3. layui.use('form', function(){    
  4.         var form = layui.form();    
  5.     
  6.         //监听提交    
  7.         form.on('submit(formDemo)', function(data){    
  8.             layer.msg(JSON.stringify(data.field));    
  9.             return false;    
  10.         });    
  11.     });  
  12. EOT;  
  13.     
  14. $this->registerJs($js, \yii\web\View::POS_END);    

或者：

PHP Code复制内容到剪贴板
  1. <?php  
  2. $this->registerJs(  
  3.    '$("document").ready(function(){  
  4.         $("#login-form").validate({ 
  5.             errorElement : "small",  
  6.             errorClass : "error", 
  7.             rules: { 
  8.                      "AgNav[nav_cn]": { 
  9.                          required: true, 
  10.                      }, 
  11.             }, 
  12.             messages:{ 
  13.                    "AgNav[nav_cn]" : {   
  14.                         required : "此字段不能为空.", 
  15.                     }, 
  16.             } 
  17.         }); 
  18.     });'  
  19. );  
  20. ?>  

在eot中使用变量：

PHP Code复制内容到剪贴板
  1. function usage() {  
  2.     global $argv;  
  3.     $cmd = $argv[0];  
  4.     echo <<<EOF  
  5. Usage:  
  6.     $cmd [--flavor=<flavor>] [--full] [file.md]  
  7.   
  8.   
  9. Examples:  
  10.         $cmd README.md > README.html  
  11.   
  12. ....  
  13.   
  14. EOF;  
  15.     exit(1);  
  16. }  

 

 

 

4.视图中引入CSS/JS文件（引用物理路径的资源包）

如果是物理路径，需要先发布：

PHP Code复制内容到剪贴板
  1. list(,$url) = \Yii::$app->assetManager->publish("@jiancai/static/js");    
  2. $this->registerJsFile($url.'/index.js', ['depends' => [frontend\themes\jiancai\assets\AppAsset::className()]]);  

 

或：

 

PHP Code复制内容到剪贴板
  1.   //定义按需加载JS方法，注意加载顺序在最后    
  2.  public static function addScript($view, $jsfile) {    
  3.      $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);    
  4.  }    
  5.      
  6. //定义按需加载css方法，注意加载顺序在最后    
  7.  public static function addCss($view, $cssfile) {    
  8.      $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);    
  9.  }    

视图中使用如下：

PHP Code复制内容到剪贴板
  1. AppAsset::register($this);    
  2. //只在该视图中使用非全局的jui     
  3. AppAsset::addScript($this,'@web/js/jquery-ui.custom.min.js');    
  4. //AppAsset::addCss($this,'@web/css/font-awesome/css/font-awesome.min.css');    

此外注意：在上面的addScript方法中，如果没有 ’depends‘=>’xxx‘ ,此处加载的顺序将会颠倒。

 

或：

 

不需要在资源包管理器中定义方法，只要在视图页面直接引入即可

PHP Code复制内容到剪贴板
  1. AppAsset::register($this);    
  2. //css定义一样    
  3. $this->registerCssFile('@web/css/font-awesome.min.css',['depends'=>['backend\assets\AppAsset']]);    
  4. //$this->registerCssFile('@web/css/index-css.css');  
  5.     
  6.  $this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['backend\assets\AppAsset']]);  
  7. //$this->registerJsFile('@web/js/jquery-2.1.1.js');   
  8.    
  9. //如下position是让定义CSS/JS出现的位置  
  10. //$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['backend\assets\AppAsset'],'position'=>$this::POS_HEAD]);    

 

 

 

PHP Code复制内容到剪贴板
  1. <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?>  

 

在控制器controller中指定资源包，可以使用同一个布局文件：

PHP Code复制内容到剪贴板
  1.     public function actionIndex()  
  2.     {  
  3.         $this->layout = "@backend/views/layouts/base";  
  4.         $view = $this->getView();  
  5.         $assets = \backend\modules\IntelligentMonitor\layouts\environment\assets\EnvironmentBackendAssets::register($view);  
  6.         $js = <<<'EOT'  
  7.             $(".main-content").hide();  
  8.             var h = $(window).height();  
  9.             h -= 30; // 主体总高度  
  10.             $(".main-content").css({"height": h + "px","overflow":"hidden"});  
  11.             $("#dynamic-showbox .showbox").each(function () {  
  12.                 // $(this).width(h);  
  13.                 $(this).height(h);  
  14.                 $(this).find(".quxian").css("height",h*0.7); //曲线的高度  
  15.                 $(this).find(".data-box").css("height",h*0.3);  
  16.             });  
  17.             $(".main-content").height(h);  
  18.      //console.log(h);  
  19. EOT;  
  20.         $view->registerJs($js);  
  21.         return $this->render('index');  
  22.     }  

 

 

 

 

 

合并与压缩资源

composer组件：

https://github.com/rmrevin/yii2-minify-view

 

 

YII自带的缺少两个组件...下面做不下去了

参考资料：

http://www.yiichina.com/doc/guide/2.0/structure-assets

 

安装JAVA：

https://java.com/zh_CN/

 

component中添加组件

all.css 和 all.js 为压缩合并后的文件命名，可自定义，frontend... 需要压缩的资源类

PHP Code复制内容到剪贴板
  1. 'components' => [  
  2.     'assetManager' => [  
  3.         'bundles' => [  
  4.             'all' => [  
  5.                 'class' => 'yii\web\AssetBundle',  
  6.                 'basePath' => '@webroot/assets',  
  7.                 'baseUrl' => '@web/assets',  
  8.                 'css' => ['all.css'],  
  9.                 'js' => ['all.js'],  
  10.             ],  
  11.             'frontend\themes\jiancai\assets\AppAsset' => ['css' => [], 'js' => [], 'depends' => ['all']],  
  12.         ],  
  13.     ],  

使用 asset 命令

Yii提供一个名为asset控制台命令来使上述操作自动处理。

为使用该命令，应先创建一个配置文件设置哪些资源包要合并以及分组方式， 可使用asset/template 子命令来生成一个模板， 然后修改模板成你想要的。

yii asset/template assets.php

该命令在当前目录下生成一个名为assets.php的文件，文件的内容类似如下：

PHP Code复制内容到剪贴板
  1. <?php  
  2. /** 
  3.  * 为控制台命令"yii asset"使用的配置文件 
  4.  * 注意在控制台环境下，一些路径别名如 '@webroot' 和 '@web' 不会存在 
  5.  * 请定义不存在的路径别名 
  6.  */  
  7. return [  
  8.     // 为JavaScript文件压缩修改 command/callback   
  9.     'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',  
  10.     // 为CSS文件压缩修改command/callback   
  11.     'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',  
  12.     // 要压缩的资源包列表  
  13.     'bundles' => [  
  14.         // 'yii\web\YiiAsset',  
  15.         // 'yii\web\JqueryAsset',  
  16.     ],  
  17.     // 资源包压缩后的输出  
  18.     'targets' => [  
  19.         'all' => [  
  20.             'class' => 'yii\web\AssetBundle',  
  21.             'basePath' => '@webroot/assets',  
  22.             'baseUrl' => '@web/assets',  
  23.             'js' => 'js/all-{hash}.js',  
  24.             'css' => 'css/all-{hash}.css',  
  25.         ],  
  26.     ],  
  27.     // 资源管理器配置:  
  28.     'assetManager' => [  
  29.     ],  
  30. ];  

应修改该文件的bundles的选项指定哪些包你想要合并， 在targets选项中应指定这些包如何分组， 如前述的可以指定一个或多个组。

Note: 由于在控制台应用别名 @webroot and @web 不可用， 应在配置中明确指定它们。

JavaScript文件会被合并压缩后写入到js/all-{hash}.js文件， 其中 {hash} 会被结果文件的哈希值替换。

 

在console控制台指定别名：

console\config\bootstrap.php

当前目录的上一级，上一级下的web目录

PHP Code复制内容到剪贴板
  1. <?php  
  2. Yii::setAlias('@webroot', __DIR__ . '/../../web');  
  3. Yii::setAlias('@web', '/');  

 

在所有包中使用工具(例如 Closure Compiler, YUI Compressor) 来合并和压缩CSS和JavaScript文件

 

 

 

根据配置文件，可执行asset 命令来合并和压缩资源文件 并生成一个新的资源包配置文件assets-prod.php:

yii asset assets.php config/assets-prod.php

生成的配置文件可以在应用配置中包含

 

QQ截图20170803104851.jpg

安装JAVA

1.png

本文来自于：http://www.yoyo88.cn/study/yii2/125.html

上一篇 beforeAction / afterSave / 等
下一篇 yii2图片处理扩展yii2-imagine的使用
相关的文章
Powered by yoyo苏ICP备15045725号