fis-chassis

##FIS-Chassis

FIS-Chassis提供Chassis框架自动化脚手架开发的能力，为webapp提供开发上的便利。

快速上手

• 安装
  • npm install -g fis-chassis
• 三条命令，满足你的所有开发需求
  • fis-chassis install <name>
  • fis-chassis release [options]
  • fis-chassis server <command> [options]
  fis-chassis可以简化为fisc

示例演示

示例安装

fis-chassis install demo --repos http://webappdemos.duapp.com/scaffold

示例预览

开启本地预览服务：

fis-chassis server start --no-rewrite

发布到预览环境：

fis-chassis release

重新刷新浏览器即可看到效果。

编译开发

###初始化脚手架

如示例安装一样，你不需要从0开始创建一个webapp，工具已经提供了一个脚手架帮你做好了准备工作。

使用fis-chassis install命令安装脚手架：

fis-chassis install init --repos http://webappdemos.duapp.com/scaffold

如果某个目录为空，使用fis-chassis release命令时也可以自动下载脚手架：

md webapp
cd webapp
fis-chassis release

... ...
找不到fis-conf.js文件，当前项目不是chassis项目，需要安装chassis脚手架吗？
[N/Y]? y

选择脚手架名称：
1. init(最简单的脚手架，适合创建自己的项目)
2. demo(一个新闻app的完整示例)

【请选择】 : 2

... ...

脚手架安装成功，请重新执行release命令;

fis-chassis release

###目录结构介绍

.
│  fis-conf.js  //fis配置文件
│  index.html  //项目首页，可以自己指定其它名称
│  
├─css
│   all.css
│   app.css
│   globalloading.css
│   pageloading.css
│   reset.css
│      
├─data    //模拟数据目录
├─img  
├─js
│  │  chassis.config.js //[todo]待优化掉
│  │  init.js
│  │  pageview._TRANSITION_.js
│  │  
│  └─common
│      │ mod.js
│      ├─baidutemplate 
│      ├─chassis  
│      └─gmu
│                      
├─page
│  ├─detail
│  │  ├─css
│  │  │   detail.css
│  │  │      
│  │  ├─html
│  │  │   detail.html
│  │  │      
│  │  ├─js
│  │  │  └─view
│  │  │     pageview.detail.js
│  │  │     subview.detail_content.js
│  │  │          
│  │  └─tpl
│  │     detail.tpl
│  │          
│  └─index
│              
└─tpl
    globalloading.html
    pageloading.html
        

###新增Page

假如我们要新增一个Page，对应的路由规则是：

{ "view" : "view" }

编辑配置文件fis-conf.js，在Chassis.router.routes下新增一条规则即可，如下：

fis.config.merge({
    chassis : {
		home   : 'index.html',
		router : {
			"routes" : {
				""       : "index",
				"detail" : "detail",
				"view"   : "view"  //新增的路由规则
			},
			
			"defaultPageTransition" : "simple",
			
			"enablePositionRestore" : true,
			
			"pageTransition" : {
				"index-detail" : "slide"
			}
		}
	}
});

保存。

###重新编译

刚才新增的规则并没有建立对应的page/view目录，我们不需要手动建立它，使用fis-chassis release命令时会自动检测到这个新增的规则并处理它：

fis-chassis release

... ....

配置文件新增了一些路由规则，对应的目录及文件没有创建，需要创建吗？
[N/Y]? y

目录及文件创建成功，请重新执行release命令!

... ...
fis-chassis release

此时，即可预览到新增的page,而且，开发目录下已经自动生成了page/view目录及对应的脚手架模板，根据需要修改自己的业务逻辑即可。 ###预览

fis-chassis release

##新增标签介绍

为了简化开发过程中的手工操作，工具在FIS的基础上新增了几个标签

###{{page.html}}

试用范围：任意html/css/js文件

工具在打包前会根据fis-conf.js设置的路由规则提取需要的page目录下的html文件内容替换掉当前标签。

###{{page.css}}

试用范围：任意html/css/js文件

工具在打包前会根据fis-conf.js设置的路由规则提取需要的page目录下的css文件内容替换掉当前标签。

###{{map.json}}

试用范围：任意html/css/js文件

工具在打包前会将map.json文件的内容替换当前标签。

###{{setting.router}}

试用范围：任意html/css/js文件

工具在打包前会将fis-conf.js的chassis.router节点的配置信息替换当前标签。

##关于前端模板

如果你在项目中使用了前端模板，一般需要选择一款合适的前端模板引擎。为了提高移动端前端模板解析的速度，工具提供模板预编译的功能，用于将前端模板编译为JS代码，同时配合mod.js提供的模块化能力，使得模板文件可以像js一样直接引用。

所以只需要根据baiduTemplate的模板语法直接创建模板文件即可。

##其它

fis-chassis仅在fis-conf.js的Chassis.router.routes规则新增时对开发目录下的page目录做新增操作。如果你删除了某些规则，工具不会删除对应的目录，但这个目录会变成孤立的目录，业务运行时不会被调用。