fis-bytedance

头条前端构建工具(fisb)

fis-bytedance是一套基于 Fis 进行封装的适用于头条前端开发方式的本地自动化辅助工具

一、安装方式

1、基于nodeJS，需先安装 Node 环境

2、安装本地自动化辅助工具fisb

$ npm install -g fis-bytedance

3、查看当前fisb版本

$ fisb -v

4、安装完成

二、使用方式——本地调试

1、先下载基于fisb构建的头条前端通用代码示例

$ git clone https://github.com/zhoujq/bytedance-fedemo.git

2、进入bytedance-fedemo 目录，发布项目

$ fisb release

3、启动本地调试服务器用于预览发布项目

$ fisb server start

4、访问 http://127.0.0.1:8080/template/bytefe/page/ 查看结果

三、使用方式——远程调试

1、远程调试基于Fis远程开发调试工具fisrcv

2、远端机器安装fisrcv，用于接收本地代码实时上传

$ npm install -g fis-receiver

2、如远程机器无root权限，可讲fisrcv安装到用户目录下，手动将bin目录添加到环境变量内

3、启动fisrcv服务

$ fisrcv 8999

4、修改本地项目fis-conf.js文件，增加deploy配置项

fis.config.merge({
    deploy: {
        dev: {
            receiver: 'http://<host>:8999/receiver',
            from: '/template',
            //远端目录
            to: '/home/template/'
        }
    }
});

5、重新发布当前项目

$ fisb release -d dev

四、功能说明

1、支持less与sass解析

2、支持underscore template前端模板解析

3、支持基于AMD规范的模块依赖关系管理

4、支持使用require.async进行异步模块加载

5、支持图片自动拼接处理，无需手动sprite

6、支持基于AMD规范的模块依赖自动加载

7、其他功能与详细使用说明见 Fis官方网站

五、目录规范

1、前端项目目录规范

[website]
  | -- [common]
  |       | -- [dialog]
  |       |     | -- dialog.tmpl
  |       |     | -- dialog.less
  |       |     | -- dialog.js
  |       | -- [util]
  |       |     | -- user.js
  |       |     | -- date.js
  |       | -- [...]
  | -- [pagelet]
  |      | -- [pl_a]
  |      |      | -- pl_a.js
  |      |      | -- pl_a.less
  |      |      | -- pl_a.html
  |      | -- [...]
  | -- [page]
  |      | -- index.html
  |      | -- ...
  | -- [static]
  |      | -- [lib]
  |      |      | -- jquery.js
  |      |      | -- ...
  |      | -- [style]
  |      |      | -- reset.less
  |      |      | -- ...
  |      | -- [image]
  |      |      | -- image_a.png
  |      |      | -- ...
  | -- fis-conf.js

2、目录结构说明

[website]：站点项目目录

[common]：用于放置通用代码，common只允许被pagelet与common内其他组件进行引用；

[pagelet]：用于放置页面模块代码，每个pagelet因包含自身所需的模板、JS与CSS，只可以被page所引用，且完全禁止pagelet内存在互相引用与嵌套关系。pagelet的html容器、css作用域、JS作用域都应完全一样，遵循以"pagelet-"开头，加模块功能的命名方式（例如：pagelet-feedlist）；

[page]：用于当前站点主页面模板，page是由一到多个pagelet构成；

[static]：用于存放所有的通用静态资源（类库、图片、基础CSS等）

fis-conf.js：FIS所依赖的项目配置文件，每个站点目录应该有且只有一个fis-conf.js文件；

六、相关工具与文档地址

1、FIS

2、fis-bytedance

3、fis-receiver

4、bytedance-fedemo

5、LESS

6、SASS

7、AMD

8、underscore template