Static Resource Management System Demo
展示静态资源管理系统设计思路的demo
环境依赖：
- fis
- php-cgi
- java
运行方法：
- 启动内置服务器
- fis server start
- 进入项目目录
- cd project
- 构建项目
- 预览开发效果命令：
fis release - 预览开发效果，并监听文件变化命令：
fis release -w - 预览开发效果，并监听文件变化，同时自动刷新浏览器命令：
fis release -wL - 预览文件压缩，加域名，资源合并，csssprite等效果，并监听文件变化，同时自动刷新浏览器命令：
fis release -oDpwL
- 预览开发效果命令：
- 刷新页面（ http://127.0.0.1:8080/ ），查看效果
ps: 如果你本地没有cgi环境，请在执行fis release命令时增加额外的
-d path/to/apache/htdocs把项目部署到支持php的服务器根目录下，也能看到效果。
目录说明：
- js目录下放js文件
- css目录下放css文件
- img目录下放图片文件
- page目录下放php页面文件
- fis-conf.js 文件是项目配置
- index.php 文件是入口php
- Resource.class.php 是静态资源管理框架
php页面示例
代码
<html>
<head>
<title>my page</title>
<?php css();?> <!-- 在这里输出link标签 -->
<?php import('css/demo.css');?> <!-- 收集资源 -->
<?php import('css/demo2.css');?> <!-- 收集资源 -->
</head>
<body>
<img src="img/baidu.png">
<div class="test1"></div>
<div class="test2"></div>
<?php import('js/demo.js');?> <!-- 收集资源 -->
<?php js();?> <!-- 在这里输出script标签 -->
</body>
</html>
api说明
- import($id) : 引用一个资源文件，可以是js、css文件
- css() : 在调用该函数的位置，将
import($id)函数收集到的css资源，以<link href="xxx">标签的形式输出 - js() : 在调用该函数的位置，将
import($id)函数收集到的js资源，以<script src="xxx">标签的形式输出
配置说明
fis.config.merge({
roadmap : {
domain : {
//所有css文件添加http://localhost:8080作为域名
'**.css' : 'http://localhost:8080'
},
path : [
{
//所有的js文件
reg : '**.js',
//发布到/static/xxx目录下
release : '/static/$&'
},
{
//所有的css文件
reg : '**.css',
//发布到/static/xxx目录下
release : '/static/$&'
},
{
//readme.md文件不发布
reg : /\/readme\.md$/i,
release : false
}
]
},
pack: {
//所有js文件合并成一个main.js文件
'pkg/main.js': '**.js',
//所有css、less文件合并成一个main.css文件
'pkg/main.css': [ '**.css', '**.less' ]
}
});
Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Php
Css