[关闭]
@mircode 2016-07-12T11:33:44.000000Z 字数 4107 阅读 845

FIS-PLUS前端工程构建工具

fis fis-plus

一、序言

fis-plus 是扩展自FIS的前端集成解决方案。其提供 后端框架、前端框架、自动化工具、辅助开发工具等开发套件

FIS-PLUS 是基于 FIS，应用于后端是 PHP，模板是 Smarty 的场景。现在被大多数百度产品使用。

二、快速入门

1、安装

fis-plus 的 自动化 / 辅助开发工具 被发布为一套 npm 包，它对环境的要求是：

FIS-PLUS安装

  1. npm install -g fis-plus

FIS

2、初始化本地环境

从github上，下载示例项目
https://github.com/fex-team/fis-plus-pc-demo

为了前后端开发分离，来并行开发，fis-plus 提供了一套本地环境模拟的工具，安装并初始化它后就能方便的模拟线上环境了。

  1. fisp server init

3、发布

  1. cd pc-demo
  2. fisp release -r common
  3. fisp release -r home

4、预览

  1. fisp server start #启动服务器

运行截图

5、示例解说

自此，一个前端项目已经运行起来了。你可以看一下 pc-demo 的源码，其中包含两个模块。

模块 这个词会贯穿整个文档，以及整个 fis-plus 的使用。为什么会有模块这种东西？ 当前端代码很多时，不得不面临分组件，分页面。为了发布迭代方便，不得不把它们分为不同的子系统。比如用户信息、首页、详情页等等。

模块 就是一个子系统，而在 fis 项目中用 namespace 和fis-conf.js来区分。每一个模块会有一个配置文件fis-conf.js，还会取名不同的namespace。这主要是为了区分模块之前的静态资源。

5.1 目录结构说明

继续进入 home 模块，可以看看有几个目录及其文件

  1. ├── fis-conf.js
  2. ├── page
  3. ├── server.conf
  4. ├── static
  5. ├── test
  6. └── widget

说一下这几个目录所代表的意思；

5.2 page如何引入widget

如示例中 index.tpl 如何应用 widget/header/header.tpl ? 如果用过 smarty 的你可能会想到include，但在 FIS-PLUS 中引入 widget 有个跟include 类似的插件完成，widget。

{%widget name="home:widget/header/header.tpl"%}
home:widget/header/header.tpl 这个是 FIS 中 静态资源 id

模板中如何使用 widget 目录下的静态资源

根据目录规范 widget 目录下的 js 讲被进行 组件化封装 ，根据 同名依赖 原则；

当使用某个widget下模板是，同名js,css将会被加载。
当使用某个widget下的js时，其同名css会被加载。

5.3 加载JS

由于 js 进行了组件化封装，比如通过 require 或者 require.async 函数来执行其中逻辑。

{%script%}
require('/widget/a.js');
{%/script%}
如上，在模板中使用 widget 下的 js，必须放到 {%script%} {%/script%} 之间，用它来代替 js 的内联用法。

5.4 加载css

说完加载 js 的方法，css 如何引入呢？

同名依赖，被依赖
通过smarty的require插件
{%require name="home:widget/a.css"%}

5.5 静态资源id

fis-plus 必须要指定模块的namespace，所以静态资源id被标记为
namespace:<资源相对于模块根目录的路径>

比如:
home/static/a.js home目录为模块跟目录，home为namespace，则静态资源id就为 home:static/a.js
namespace可以为任意值，可以不跟模块根目录相同。

静态资源 id 在那些情况下使用，那些情况下必须用静态资源 id？
使用widget、require、html等smarty插件时，必须指定资源的id
require、require.async等JavaScript函数，可以使用id

  2. /***********************************
  3. * 一、对项目中涉及到JS和CSS以及图片进行压缩
  4. ***********************************/
  5. fis.match('*.js', {
  6.   optimizer: fis.plugin('uglify-js')
  7. });
  8. fis.match('*.css', {
  9.   optimizer: fis.plugin('clean-css')
  10. });
  11. fis.match('*.png', {
  12.   optimizer: fis.plugin('png-compressor')
  13. });
  15. /***********************************
  16. * 二、对JS和CSS以及图片添加md5指纹验证
  17. ***********************************/
  18. fis.match('*.{js,css,png}', {
  19.   useHash: true
  20. });
  22. /***********************************
  23. * 对图片进行合并，来减少请求数量
  24. ***********************************/
  25. // 启用 fis-spriter-csssprites 插件
  26. fis.match('::package', {
  27.   spriter: fis.plugin('csssprites')
  28. })
  29. fis.match('*.css', {
  30.   useSprite: true
  31. });
  34. fis.config.set('pack', {
  35.     '/pkg/lib.js': [
  36.         'js/lib/jquery.js',
  37.         'js/lib/underscore.js'
  38.     ],
  39.     '/pkg/aio.css': '**.css'
  40. });
  41. fis.config.merge({
  42.     roadmap : {
  43.         path : [{
  44.                 reg : '**.js',            // 所有JS文件
  45.                 release : '/static/js$&', // 发布目录
  46.                 url : '/mm/static/js$&'   // 访问路径
  47.             },{
  48.                 reg : '**.css',
  49.                 release : '/static/css$&',
  50.                 url : '/pp/static/css$&'
  51.             },{
  52.                 reg : /^\/images\/(.*\.(?:png|gif))/i,
  53.                 release : '/static/pic/$1',
  54.                 url : '/oo/static/baidu$&'
  55.             }
  56.         ]
  57.     }
  58. });
  60. // 我们可以通过_inline这个标识符来实现对资源的嵌入
  62. // HTML中嵌入资源
  63. <img title="百度logo" src="images/logo.gif?__inline"/>
  64. <link rel="stylesheet" type="text/css" href="demo.css?__inline">
  65. <script type="text/javascript" src="demo.js?__inline"></script>
  66. <link rel="import" href="demo.html?__inline">
  68. // JavaScript中嵌入资源
  69. __inline('demo.js');
  70. var img = __inline('images/logo.gif');
  71. var css = __inline('a.css');
  73. // CSS中嵌入资源
  74. @import url('demo.css?__inline');
  76. // 我们可以通过添加代码注释的方式依赖声明，最后生成map.json文件
  78. // HTML中依赖声明
  79. <!--
  80.     @require demo.js
  81.     @require "demo.css"
  82. -->
  84. // JavaScript中依赖声明
  85. /**
  86.  * @require demo.css
  87.  * @require list.js
  88.  */
  89.  或
  90.  var $ = require('jquery');
  92. // CSS中依赖声明
  93. /**
  94.  * demo.css
  95.  * @require reset.css
  96.  */
  99. {html her="common:static/lib.js"}
  100. {head}
  101.     {title}This is title{/title}
  102.   {/head}
  103.   {body}
  104.     ...some thing
  105.   {/body}
  106. {/html}
  108. <!DOCTYPE html>
  109. <html>
  110.     <head>
  111.      <title>This is title</title>
  112.     </head>
  113.     <body>
  114.     .......
  116.     <script>
  117.         BigPipe.hooks["__cb_0_1"]=function(){/*some code...*/};
  118.         BigPipe.setResourceMap({
  119.           "c8ade30":{
  120.              "src":"*lib.js的真实发布路径*",
  121.              "type":"js",
  122.              "deps":[],
  123.              "mods":["common:static/lib.js"]
  124.            }
  125.         });
  126.         BigPipe.onPageletArrive({"id":null,"children":null,"deps":{"beforedisplay":["3365e3d"],"load":[]},"hooks":{"load":["__cb_0_1"]}});
  127.     </script>
  128.     </body>
  129. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注