[TOC]
## JS和CSS合并
- 文件名称：tpl.css，tpl.scss，tpl.js
> 仅需在模板目录下创建文件就会自动生成对应的文件URL连接
> 调用多个模板时CSS或JS始终对应一个URL连接，这个连接会随着模板路径和模板的个数而改变
> 可对CSS和JS进行压缩设置
> CSS和JS代码保存于缓存中并压缩（需设置/.env文件设置TPL_CACHE=true）
#### 代码示例
设置文件/html/www/demo/test/js_css/demo1/tpl.blade.php内容如下
~~~
<div>Hello Tphp !</div>
~~~
设置文件/html/www/demo/test/js_css/demo1/tpl.css内容如下
~~~
body{
background-color: #FEE;
}
_CLASS_{
background-color: #FCC;
}
~~~
设置文件/html/www/demo/test/js_css/demo1/tpl.js内容如下
~~~
$(function () {
$('body').append('<div>这是JS生成效果</div>');
$('_CLASS_').append('<div>模板内效果</div>');
});
~~~
打开网址[http://demo.tphp.com/test/js\_css/demo1](http://demo.tphp.com/test/js_css/demo1)获得如下效果
生成源代码
生成的CSS
生成的JS
- 可以看到_CLASS_替换成了模块路径的样式名称，可以根据样式名称定位到模块代码
#### 压缩JS和CSS
编辑/.env文件设置TPL_CACHE=true
生成的CSS
生成的JS
#### 配置JS和CSS
设置文件/html/www/demo/test/js_css/demo2/data.php内容如下
~~~
<?php
return [
// 调用其他模块样式
'css' => '../demo1',
// 'css' => ['../demo1'], // 或者
// 调用其他模块JS
'js' => '../demo1',
// 'js' => ['../demo1'], // 或者
];
~~~
设置文件/html/www/demo/test/js_css/demo2/tpl.blade.php内容如下
~~~
<div>Hello Tphp !</div>
<div class="demo2">DEMO2演示</div>
~~~
设置文件/html/www/demo/test/js_css/demo2/tpl.css内容如下
~~~
_CLASS_ .demo2{
background-color: #CCF;
color: #F00;
}
~~~
设置文件/html/www/demo/test/js_css/demo2/tpl.js内容如下
~~~
$(function () {
$('_CLASS_ .demo2').append('\t加了点字符串');
});
~~~
打开网址[http://demo.tphp.com/test/js\_css/demo2](http://demo.tphp.com/test/js_css/demo2)获得如下效果
生成源代码
生成的CSS
生成的JS
#### tpl.scss，scss示例
在模块中有介绍，文件路径/html/www/demo/test/module/tpl.scss
#### 外部JS、CSS设置（设置更灵活）
设置文件/html/www/demo/test/js_css/demo3/data.php内容如下
~~~
<?php
return [
'css' => [
'../demo1', // 在模板径下相对位置
'@../demo1', // 直接输出路径（指定为head标签中）
'@@../demo1', // 直接输出路径（指定为head标签中）
'http://www.baidu.com/test.css' // 直接输出路径（指定为head标签中），当指定http或https时默认直接输出路径
],
'js' => [
'../demo1',// 在模板径下相对位置
'@../demo1', // 直接输出路径（指定为body标签底部）
'@@../demo1', // 直接输出路径（指定为head标签中）
'http://www.baidu.com/test.js', // 直接输出路径（指定为body标签底部）
'@@http://www.baidu.com/test.js' // head标签中
],
];
~~~
打开网址[http://demo.tphp.com/test/js\_css/demo3](http://demo.tphp.com/test/js_css/demo3)获得如下效果
#### 更换 http:\/\/demo.tphp.com\/static\/ 路径
- 有时候不想用默认的路径展示静态类文件
- 有时候想把静态js或css放到其他服务器
- 那么可以设置 .env 文件中的 STATIC=http://static.tphp.com 即可
- 同样以demo3为例
打开网址[http://demo.tphp.com/test/js\_css/demo3](http://demo.tphp.com/test/js_css/demo3)获得如下效果
- 设置了url(...)将会出现路径转化，而其他无效