FISP笔记

FIS官方文档：http://fis.baidu.com/fis-plus/userdoc

FIS wiki: https://github.com/fex-team/fis/wiki

FIS与FISP关系：

FIS是前端解决方案，产生之初定位就是做一个内核，提供一套编译体系以及一套静态资源管理的设计思路及其本地调试。编译体系可以简单通过配置 + 插件的方式任意扩展。

FISP是在FIS规范下的一套具体实现，后端基于smarty3+php。

具体区别可查看：http://fex.baidu.com/blog/2014/03/fis-plus/

一、环境安装

环境要求：node版本：>= v0.8.0

安装fis：  npm install -g fis-plus

安装lights(lights是fis提供的包管理工具):   npminstall -g lights

安装XAMPP：Apache + MySQL + PHP + Perl环境

配置环境变量如：变量名PHPRC，变量值c:\xampp\php

https://www.apachefriends.org/zh_cn/index.html

http://oak.baidu.com/fis-plus/document.html

二、示例安装：

首先安装FIS本地的调试预览环境

$ fisp server init

使用lights下载demo到本地

$ lights install pc-demo

Demo目录结构：

├── common  //公用资源模块
│   ├── fis-conf.js  //配置文件
│   ├── page     //页面模板目录
│   ├── plugin   //smarty plugin目录
│   ├── static   //静态资源目录
│   └── widget   //模块化组件目录
└── home   //业务模块
   ├── fis-conf.js
   ├── page
   ├── static
   ├── test   //测试数据目录
   └── widget

启动FIS本地调试服务器，在浏览器中预览页面：

//进入common模块路径
$ cd common
 
//编译发布common模块
$ fisp release -c
 
//进入home模块路径
$ cd ../home
 
//编译发布home模块
$ fisp release -c
 
//启动本地server服务
$ fisp server start
 
//在浏览器中访问页面，看demo效果
http://localhost:8080/home/page/index

三、FIS开发命令（FISP对应命令为fisp）

fis release代码编译与部署：

Usage: release [options]
 
  Options:
 
    -h, --help             output usage information
    -d, --dest <names>     release output destination
    -m, --md5 [level]      md5 release option
    -D, --domains          add domain name
    -l, --lint             with lint
    -t, --test             with unit testing
    -o, --optimize         with optimizing
    -p, --pack             with package
    -w, --watch            monitor the changes of project
    -L, --live             automatically reload your browser
    -c, --clean            clean compile cache
    -r, --root <path>      set project root
    -f, --file <filename>  set fis-conf file
    -u, --unique           use unique compile caching
    --verbose              enable verbose output

四、开发规范

http://fis.baidu.com/fis-plus/userdoc/%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95#toc_3

模板开发、JS开发、CSS开发、smarty插件:

http://fis.baidu.com/fis-plus/userdoc/%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95

http://fis.baidu.com/fis-plus/userdoc/fis/%E6%A8%A1%E6%9D%BF#toc_0

本地调试：

fisp server open  命令可打开本地运行环境目录

fisp server start  开启本地服务器

fisp release –w   文件监听

fisp release –wL  文件监听并在浏览器上实时刷新

 

路径访问规则：http://localhost:8080/modulename/page/pagename

本地测试数据：

http://fis.baidu.com/fis-plus/userdoc/fis/%E6%9C%AC%E5%9C%B0%E8%B0%83%E8%AF%95%E6%95%B0%E6%8D%AE%E5%8A%9F%E8%83%BD

本地模拟请求转发：

http://fis.baidu.com/fis-plus/userdoc/fis/%E6%9C%AC%E5%9C%B0%E6%A8%A1%E6%8B%9F%E8%AF%B7%E6%B1%82%E8%BD%AC%E5%8F%91%E5%8A%9F%E8%83%BD

server.conf专门配置转发规则

项目很大，多模块时，一个模块配置server.conf就可以啦，比如在common模块配置全站的转发规则，否则会覆盖。

所有非rewrite、template和redirect开头的会被当做注释处理。

fis允许用户自定义全新的规则噢~ 自定义的规则优先级最高，会在server.conf保存的规则之前匹配url

线上调试测试：

在url上加上 fis_debug 参数，即可获取静态资源的独立加载，而不是加载资源包，可知道是哪个模板文件报错。

http://localhost:8080/home/page/index?fis_debug

自动编译、开发配置：

http://fis.baidu.com/fis-plus/userdoc/fis/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%B7%A5%E5%85%B7#xss

发布部署、上传测试机：

http://fis.baidu.com/fis-plus/userdoc/fis/%E4%B8%8A%E4%BC%A0%E9%83%A8%E7%BD%B2#toc_0

配置API：

http://fis.baidu.com/fis-plus/userdoc/API

 

五、项目实例

1、项目背景

基于同一套设计内容，组建适应多平台页面模块组成不同的页面（多平台指的是内嵌不同的VC客户端，页面尺寸不一样，调用的内容不一样）

 

2、项目规划

目录结构

├── common  //公用资源模块
│   ├── fis-conf.js  //配置文件
│   ├── page     //页面模板目录
│   ├── plugin   //smarty plugin目录
│   ├── static   //静态资源目录
│   └── widget   //模块化组件目录
└── web01   //业务模块一
│   ├── fis-conf.js
│   ├── page
│   ├── static
│   ├── test   //测试数据目录
│    └──widget
└── web02   //业务模块二
   ├── fis-conf.js
   ├── page
   ├── static
   ├── test   //测试数据目录
   └── widget

页面所有模块均放于common目录下，在业务对应目录下放置页面模板，打包配置在common/fis-conf.js，路径规则common/server.conf，css采用less(纯粹为变量的引用)。

常用命令：

Fisp server clean 清除服务器数据

Fisp server start  开启服务器

Fisp server stop  停止服务器

Fisp server open  打开本地调试环境

Fisp release –c  进入对应项目目录发布模块(只有发布用到的模块后页面才能正常访问)

Fisp release –p  发布打包后的模块

Fisp release –opd ../dist  输出打包压缩后的文件到指定目录

Fisp release –wL  文件修改后实时监控及浏览器自动刷新（实时刷新需在chrome上安装live reload插件）

 

生成html:

Fis默认安装没有输出html页面的功能。打开本地调试环境，修改fisdata/TestData.class.php，配置通过浏览器访问指定路径生成访项目下所有html。

在server.conf中配置转发路径“dist-项目名”，指向某一模板，当访问此路径即可以本地环境生成html目录存放html页面。

 

注意：输出项目中所有用到的路径均为绝对路径。

 

3、存在问题

(1) Less中针对不同项目设置的变量，common/fis-conf.js的打包设置(前面配置中已有的模块后面包里不会再包含)，需在输出时针对不同项目进行手动调整。

在开发过程，偶尔会出现占用系统资源过多情况，导致电脑运行缓慢

(2) 部分图片文件输出后比源文件大

(3) Smarty模板产出的html模块之间结构缩进不清晰。

 

4、项目优化

Csssprites，按repeat类型生成sprites背景图：

fis-spriter-csssprites  https://github.com/fex-team/fis-spriter-csssprites#%E4%BD%BF%E7%94%A8

fis.config.set('modules.spriter', 'csssprites');
需要使用sprite的图片路径后加后缀?__sprite
background: url(/img/1px_bg.png?__sprite) repeat-x;