fis 产出修改的html,Fis3前端开发简单实践

一、简述

1.1 同类工具

Grunt, Gulp, Fis。它们的功用大同小异， 均是面向前端的工程构建工具。解决前端工程中性能优化、资源加载、模块化开发、自动化工具、开发规范、代码部署等问题。

曾写过一篇关于Gulp的博文《GULP的配置和使用》。

这次要聊的是Fis，这是百度的开源工具。Fis的体量比较大， 内置基础组件的功能比同类产品更为丰富。 Fis经历了三个版本， 目前是Fis3。

1.2 使用感受

性能优化

CSS,JS,HTML等文件， 在发布后自动压缩。

前后端分离

如果代码没有与后端完全分离， 每次调试前端代码， 总是需要对后端的代码进行编译构建， 需要数据库等依赖服务的正常， 十分耗费时间。 例如对维金的代码进行二次开发时， 在我们不熟悉维金系统的部署环境下， 想对前端进行有效改动是十分艰难的。

而前端代码与后端完全分离后就不存在上述问题。 Fis3集成了轻量级的HTTP服务器， 前端代码编写完毕后，Fis3自动构建发布，直接从浏览器看到执行效果。

支持Less

使用Less代替Css是大势所趋， 优点多多。

比如 Css中， 属性值均为写死； Less支持变量。这个特性使得我们能够轻易改变整个系统的色彩风格。

又比如Css中， 所有的选择器都只能线性书写， 而Less中， 可以嵌套书写。 显然Less的书写逻辑更加清晰， 不冗余。

Css:

.class-outer .class-inner1 { color: #000000;}

.class-outer .class-inner2 { color: #000001;}

Less：

.class-outer {

.class-inner1 { color: #000000;}

.class-inner2 { color: #000001;}

}

二、安装

2.1 安装Node与NPM

Windows下安装Node，NPM

安装包会自动添加环境变量。 安装成功后， 打开命令提示符， 输入node –v查看版本号。

新版的NodeJs内集成了Npm, 所以可在命令提示符中键入npm –v， 查看npm是否安装成功。

2.2 安装FIS3

在命令提示符中键入： npm install –g fis3

-g安装到全局目录，必须使用全局安装，当全局安装后才能在命令行(cmd或者终端)找到 fis3 命令

安装完成后执行 fis3 -v 判断是否安装成功。

2.3 安装Fis常用插件

2.3.1 内置插件

2.3.2 需安装的插件

npm install –g fis-parser-less-2.x, Less解析插件

npm install –g fis3-postpackager-loader， 模块加载器。 关于此插件的介绍。

npm install –g fis-parser-template ， 模板解析

npm install -g fis3-optimizer-htmlminify , html压缩

三、使用

3.1 配置文件

文件样例：

fis.set('namespace', 'fis-test');

fis.set('project.charset', 'utf8');

fis.media('test')

// 能够解析less文件

.match('**/*.less', {

parser: fis.plugin('less-2.x'),

rExt: '.css',

})

//分配到此属性的资源出现在静态资源表中

.match('*.html', {

useMap: true

})

// 压缩css

.match('*.css', {

optimizer: fis.plugin('clean-css')

})

// 压缩js

.match('*.js', {

optimizer: fis.plugin('uglify-js')

})

//文件分配到此属性后，其 url 及其产出带 md5 戳

.match('*.{js,css,less,png}', {

useHash: true

})

//当设置开启同名依赖，模板会依赖同名css、js；js 会依赖同名 css，不需要显式引用。

.match('/widget/**', {

useSameNameRequire: true

})

// 压缩html文件

.match("*.html",{

optimizer : fis.plugin("htmlminify")

})

// 导入js等外部文件

.match('::package', {

postpackager: fis.plugin('loader', {

resourceType: 'amd',

useInlineMap: true

})

})

3.2 Demo代码

3.2.1 目录结构

如上图， 一级目录有三个page, static, widget。

(1)Page, 放置html文件。 使用二级文件夹对html文件进行分类， 每个二级文件夹下的文件不宜过多， 最多不得超过五个。

(2)Static, 放置Js,Css，图片等静态资源。Static文件夹下有两个二级文件夹： common, static_page。

Common文件夹下放置整个工程都会引用到的资源， 例如jquery库， 网站的logo, 总体样式等等。Common文件夹下又需建立若干文件夹。

Images: 系统全局引用的图片资源， 例如系统的图标， 基础背景等。

lib: js， css等库资源

Style: 全局less式样

View: html代码片段

Static_page文件夹下放置各个页面独有的js，css， img等资源。 此文件夹下资源的组织方式与Page文件夹下组织方式一致， 子文件名一一对应。如下图。

3.2.2 代码结构

打开login.html文件：

我们可以看到， 页面头部通过的方式引入位于static/common下的html片段文件header-info.html

打开header-info.html文件， 我们可以看到所有页面都共用的mete头， 以及js库和公共使用文件。 因此，  只要我们在页面上引入header-info.html， 所有的公共js, less就都引入这个页面了。

再查看common.less文件， 我们只需要把其它公共使用文件引入common.less文件， 所有这些文件就全部被注入到各个页面了。

3.2.3 代码调试

打开命令提示符， 进入到工程文件夹下。键入命令：fis3 server start,

fis3内嵌的服务器就启动了。

键入命令：fis3 release test, 整个工程便会被发布。(注： test是项目配置文件fis-config.js中的media名称)

使用命令：fis3 release test –wL, fis3会监控文件的修改， 如果有文件改动， 已打开的页面会自动刷新(注： 开启-L会导致页面加载极慢， 所以可以只使用-w命令)。

3.2.4 Mock假数据

当后端开发人员还没有准备好后端接口时，为了能让前端项目开发继续进行下去，往往需要提供假数据来协助前端开发。 官网提供了详细方案。

3.2.5 与SpringMvc集成

(1) 为前端文件分配特定的部署文件夹。例如： resources-wap。

(2) 修改fis3配置文件， url为部署后的访问路径

.match('*.{js,css,less,png}', {

useHash: true,

url : '/cashier-front/wap/$0'

})

(3) 执行命令：fis3 release test -d E:\workspace\rabbit-client\src\main\webapp\resources-wap，前端工程发布到目标文件夹。

(4)启动Tomcat, 访问链接http://localhost:端口/cashier-front/wap/xxxx, 即可看到相应前端页面。