[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)获得如下效果 ![](https://box.kancloud.cn/63f01023c3d98572024c44f01b78aa66_626x142.png) 生成源代码 ![](https://box.kancloud.cn/4180c7c166078d43344abee00b211572_757x273.png) 生成的CSS ![](https://box.kancloud.cn/c045561aa6cdba627bea3819d04bf6ff_609x165.png) 生成的JS ![](https://box.kancloud.cn/43fa31bf734f6e1a1313bb45a47267d1_650x136.png) - 可以看到_CLASS_替换成了模块路径的样式名称,可以根据样式名称定位到模块代码 #### 压缩JS和CSS 编辑/.env文件设置TPL_CACHE=true 生成的CSS ![](https://box.kancloud.cn/22d99e07a12cbb754819e526d30ab9d3_663x112.png) 生成的JS ![](https://box.kancloud.cn/9b9adffc8f8bb19c463f4a6b2c15320a_737x156.png) #### 配置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)获得如下效果 ![](https://box.kancloud.cn/844ca20d777c839d1792563a631516d9_630x194.png) 生成源代码 ![](https://box.kancloud.cn/3b6d1224982ee00a43881950b4043b98_720x276.png) 生成的CSS ![](https://box.kancloud.cn/29280bd35920e61ec971d952ed2e5563_586x276.png) 生成的JS ![](https://box.kancloud.cn/4985d9eb6d35e84cbd7b08160aef117a_642x217.png) #### 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)获得如下效果 ![](https://img.kancloud.cn/b9/09/b9095b1b91153af6f58e2a951ede1944_770x400.png) #### 更换 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)获得如下效果 ![](https://img.kancloud.cn/fc/1b/fc1b12a19e6e4e01babfefa31dfa4e3f_714x406.png) - 设置了url(...)将会出现路径转化,而其他无效