Fis3前端开发简单实践

by ·0评论

一、简述

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

  • 到官网下载页https://nodejs.org/en/download/， 选择相应的安装包进行安装。
  • 安装包会自动添加环境变量。 安装成功后， 打开命令提示符， 输入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 内置插件

详情参考链接：http://fis.baidu.com/fis3/docs/api/config-system-plugin.html

 

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 目录结构

directory

如上图， 一级目录有三个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代码片段

directory2

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

3.2.2 代码结构

打开login.html文件：

file1

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

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

file2

 

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

file3

 

3.2.3 代码调试

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

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

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

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

随后访问http://localhost:8080/page/test/login.html， 就能看到前端页面了。

 

3.2.4 Mock假数据

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

 

3.2.5 与SpringMvc集成

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

       <mvc:resources mapping="/wap/**" location="/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, 即可看到相应前端页面。

 

 

Related Posts

发表评论

邮箱地址不会被公开。