Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能。分享给大家供大家参考，具体如下：

扩展插件下载地址，解压后复制到/protected/vendor/

https://github.com/muayyad-alsadi/yii-EClientScript

main配置文件配置插件，components里面增加

//js，css代码压缩，合并
'clientScript' => array(
 'class' => 'application.vendor.yii-EClientScript.EClientScript',
 'combineScriptFiles' => TRUE, // By default this is set to true, set this to true if you'd like to combine the script files
 'combineCssFiles' => TRUE, // By default this is set to true, set this to true if you'd like to combine the css files
 'optimizeScriptFiles' => !YII_DEBUG, // @since: 1.1
 'optimizeCssFiles' => !YII_DEBUG, // @since: 1.1
 'optimizeInlineScript' => false, // @since: 1.6, This may case response slower
 'optimizeInlineCss' => false, // @since: 1.6, This may case response slower
),

工具类Unit.php放于/protected/vendor/components,类中定义加载方法

/**
 * 注册JS 文件
 */
public function jsFile($file,$position=CClientScript::POS_HEAD,$media=array()){
 $cs=Yii::app()->getClientScript();
 $cs->registerScriptFile($file,$position,$media);
}
/**
 *注册CSS文件
 */
public function cssFile($file,$media=''){
 Yii::app()->getClientScript()->registerCssFile($file,$media);
}

模板调用css文件，js文件

<?php
//注册CSS文件，
Unit::cssFile('/css/home/base.css');
//result to:<link rel="stylesheet" type="text/css" href="/css/home/base.css" />
//IE6下加载CSS文件
Unit::cssFile('/css/form.css','lte IE 6');
//result to:<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/form.css" /><![endif]-->
//注册JS文件，
Unit::jsFile('/js/jquery.lazyload.js');
//result to:<script src="/js/jquery.lazyload.js">
//IE９下加载JS文件
Unit::jsFile('/js/common.js', CClientScript::POS_HEAD, array('media' => 'lt IE 9'));
//result to:<--[if lt IE 9]><script src="/js/common.js"><![endif]-->
?>

更多关于Yii相关内容感兴趣的读者可查看本站专题：《Yii框架入门及常用技巧总结》、《php优秀开发框架总结》、《smarty模板入门基础教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。

赞 (0)

相关推荐

  • yii2简单使用less代替css示例

    添加组件php composer.phar require --prefer-dist singrana/yii2-less "*" 修改配置文件`main.php' 'components' => [ 'assetManager' => [ 'converter' => [ 'class' => \singrana\assets\Converter::className(), ], ], ], 在AppAsset中 class AppAsset extends

  • yii2 页面底部加载css和js的技巧

    一般来说,网页内部的js文件或代码,都是放置在网页底部</body>的前面,这是因为网页自上而下加载,用户在访问我们页面的时候尽量不要因为加载js展现过长时间的空白页面,停留时间过长就白白流失了用户量. yii2中是集成了jQuery的,而且jQuery文件是加载在页面底部的,因此,如果我们的js代码段不在页面底部加载,就很大可能会发生$未定义的友好提示. 我这废话一大堆得毛病确实需要去挂个号看看了... 先来看看js代码段怎么处理 <?php $this->registerJs(

  • Yii2中使用asset压缩js,css文件的方法

    官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets.php 生成assets.php,这是一个配置模板,并修改如下 <?php /** * Configuration file for the "yii asset" console command. */ // In the console environment, some pat

  • Yii2 加载css、js 载静态资源的方法

    应用场景 Yii2提供了AppAsset类管理静态资源,在使用Yii2 布局模板时,如果想在某个页面内部写一段js 并且在页面底部,如果直接使用 script 标签是不可以的. 使用AppAsset类管理静态资源 打开assetsAppAsset.php,定义 addJs(),addCss() 分别用于在静态页面引入外部js.css 文件 1.修改AppAsset.php文件代码 namespace backend\assets; use yii\web\AssetBundle; /** * @

  • Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

    本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

  • JS中使用gulp实现压缩文件及浏览器热加载功能

    JS中使用gulp实现压缩文件及浏览器热加载功能

    gulp类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要项目文件夹,然后在根目录输入  npm init  (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息.比如你用到的各种依赖) 三.使用npm install 安

  • 浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

  • visual studio code 编译运行html css js文件的教程

    运行html文件 1.添加插件扩展 2.安装 open in browser 3.在对应的html 文件处右击,选择open in default browser 或者直接 总结 到此这篇关于visual studio code 编译运行html css js文件的教程的文章就介绍到这了,更多相关visual studio code 运行html css js文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • JS实现的自定义显示加载等待图片插件(loading.gif)

    本文实例讲述了JS实现的自定义显示加载等待图片插件.分享给大家供大家参考,具体如下: 在工作中遇到了一个问题 -- 某个业务流程分为几个阶段,每个阶段如果在数据没有显示出来之前就要显示加载图片loading.gif文件,如果有数据了就消失.为此,自己写了一个方法,方便整个工程使用. <button onclick="show()">show</button> <button onclick="hide()">hide</bu

  • 解决springMVC 跳转js css图片等静态资源无法加载的问题

    web.xml中 servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-va

  • 如何通过Django使用本地css/js文件

    这篇文章主要介绍了如何通过Django使用本地css/js文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在网上看了很多说Django如何使用本地css/js的文章, 很多都是说的不是很清楚. 今天终于自己来验证一个能用的了, 记录下 在manager.py同层级下创建static文件夹, 里面放上css , js, image等文件或者文件夹 我的文件夹tree: ➜ FileService git:(master) ✗ tree . ├

  • vue 使用vant插件做tabs切换和无限加载功能的实现

    样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观 官方文档 我在文件中

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • JS实现进度条动态加载特效

    本文实例为大家分享了JS实现进度条动态加载的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"

随机推荐