【工程化】前端工程构建工具fis3篇

FIS3 一个略微小众的被置弃维护了的前端工程构建工具，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。

在全民拥抱webpack的时代里，简单留个笔记 是爱过的印记ღ( ´･ᴗ･` )

一、工作原理

FIS3 是基于文件对象进行构建的，每个进入 FIS3 的文件都会实例化成一个 File 对象，整个构建过程都对这个对象进行操作完成构建任务。

构建的时候生成一张资源依赖表。浏览器或者后端模板语言在解析的过程中通过查表得到某个静态资源在不同环境下的引用路径。

二、常用功能

1. 内置语法支持内容嵌入

这个功能可以支持一些公共模块部分抽取出来管理

## html中嵌入页面文件 
//编译前
<link rel="import" href="demo.html?__inline”>
//编译后  直接把demo.html的代码嵌入
<h1>demo.html content</h1>

-----------------------------------

## 样式同理
//编译前
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
//编译后  内容展开直接把demo.css的的代码嵌入到<style>
<style>img { border: 5px solid #ccc; }</style>

2.引用资源

## 在css中引用资源
@import url('demo.css?__inline’);//在css在引入其他样式 编译后直接合并同一份资源，减少页面网络资源请求

## 在js在引用资源
__inline('demo.js’); //引入其他js
__inline('./groupActivity.html’), //引入模板， 例如vue的组件

3.定位资源

//使用__uri读取相对于当前文件夹的相对路径。
__uri('demo.js’); 
如果链接有参数时 它也只是当成字符串处理~  不完美的地方之一啰

4.雪碧图合并

配置上 需要用到csssprites的plugin。
是个有意思但并不常有的功能 但是局限性在于需要写去单独的标签或者伪类里面才能正确合并，而且 到后面版本 已经不再支持。

li.list-1::before { //用单独的装载
  background-image: url('./img/list-1.png?__sprite'); //打上__sprite标志
}
li.list-2::before {
  background-image: url('./img/list-2.png?__sprite');
}
//编译后 就默认读取一张是合并后的雪碧图

三、配置接口

1. fis.match(selector, props) 设置规则的配置接口

fis.match('{a,b}.js', { release: '/static/$0' });

2. fis.media(mode) 设置多种状态接口

//配置在有cdn的情况下执行
fis.media('cdn').match('*.js', { 
    optimizer: fis.plugin('uglify-js’)
});
# 终端执行 就会触发进行压缩。
$ fis3 release cdn 

3. fis.set(key) fis.get(key) 设值取值

fis.set('charset', 'utf-8’); 
fis.get('charset'); 

//构建时被忽略，可设置project.ignore的值实现
fis.set('project.ignore', [ 
  'output/**',
  'node_modules/**',
  '.git/**',
  '.svn/**'
]);

4. fis.plugin(name [, props [, position]]) 插件调用接口

编译流程：

lint：  //代码校验检查，比较特殊，所以需要 release 命令命令行添加 -l 参数
parser：//预处理阶段，比如 less、sass、es6、react 前端模板等都在此处预编译处理
preprocessor：  //标准化前处理插件, 例如加自动前缀  autoprefixer
standard：      //标准化插件，处理内置语法
postprocessor： //标准化后处理插件

配置启用某些插件的四个扩展点:

prepackager      //打包前处理插件扩展点
packager         //打包插件扩展点，通过此插件收集文件依赖信息、合并信息产出静态资源映射表
spriter          //图片合并扩展点，如 csssprites
postpackager     //打包后处理插件扩展点

四、常用命令

fis3 server 服务

• 查看全部关于server的命令详情：fis3 server —help
• 启动：fis3 server start
• 停止：fis3 server stop
• 清除文件：fis3 server clean

• 参数说明[可叠加使用]

  • --root //指定根目录
  • --port //指定端口
  • --type //指定类型
  • --timeout //设置时间超时

# 指定根目录到output 端口1234 指定类型是jello 起服务
$ fis3 server start --root ../output --port 1234 --type node

fis3 release 编译发布

• 查看全部关于release的命令详情：fis3 release —help

• 参数说明[可叠加使用]

  • -w 》等同于 --watch //监听
  • -L 》等同于 --live //热更新
  • -c 》等同于 --clean //清缓存

五、安装使用

1.安装node和npm 对版本有要求。

2.全局安装fis3

# 全局安装
$ npm install -g fis3

# 安装后 可查看版本
$ fis3 -v
  
# 查看fis3 命令提供的功能

3.fis3 init 模板名

$ fis3 init 模板名 //不写模板名 就用默认模板html的

模板名可在fis-scaffold中选择适合的模板。

其中jello模板。jello+velocity模板的框架最主要的特点就是实现前后端开发分离，前后端同事只需在开发前期将接口数据约定好，即可独立进行开发工作。前端人员可以通过json数据模拟，即可在jello环境中预览页面。

这也是选择fis作为编译工具的原因之一。

4.进入项目 跑起来

fis3 server start 起服务
fis3 release 监听就能搞起来了

fis有个问题 它是全局的 所以每次构建的都系都放在上次构建的地方 就算是跨项目了之后也是， 这个是它的问题之一。

六、配置文件 fis-conf.js

fis默认找名字叫fis-conf.js读取配置。自行补充调整适合的配置

var pageName = "project_name";  //当前项目的名称
var static_path = "static";//静态资源的相对路径,默认为static
var html_path = "html";//HTML文件的相对路径,默认为html
var cdn_url = 'https://baidu.com//' + pageName;//CDN的地址

fis.set('charset', 'utf-8');

/////启用打包
fis.match('::package', {
  // spriter: fis.plugin('csssprites'),
  postpackager: fis.plugin('loader')
});

//启用less编译
fis.match('*.less', {
  parser: fis.plugin('less'),
  rExt: '.css'
});

// 自动给 css 属性添加前缀,让标准的 css3 支持更多的浏览器. 
fis.match('*.{css,less}', {
  // useSprite: true, 
  release: '/' + static_path + '/$0', //若设置 release 为 FALSE，则不再产出此文件
  preprocessor: fis.plugin('autoprefixer', { //preprocessor打包前执行
    "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
    "cascade": true
  })
});

fis.match('*.es', {
  parser: fis.plugin('babel-5.x'),
  rExt: 'js',
  isMod: false,
  release: '/' + static_path + '/$0',
});

//开始合并、打包各个模块
fis.match('/module/**.{less,css}', {
  packTo: '/css/' + pageName + '.css'
});
fis.match('/module/**.js', {
  packTo: '/js/' + pageName + '.js'
});

//转换为png8格式，文件大小会减少很多，但是会有一定程度的颜色、alpha丢失,不用时就注释掉。
fis.match('*.png', {
  optimizer: fis.plugin('png-compressor', { type: "pngquant" })
});

//设置发布路径
fis.match('*', {
  release: '/' + static_path + '/$0'
});
fis.match('/*.html', {
  release: '/' + html_path + '/$0'
});

fis.match('htmlInsert/*.html', {
  release: '/' + static_path + '/module/$0'
});

// 定义一个fis3 release cdn的命令 执行一下打包命令

//打上md5戳并且发布CDN地址
fis.media('cdn').match('*.{less,png,js,jpg,css,svg,gif,es,json}', {
  domain: cdn_url, // 资源路径
  useHash: true,   //设置为true则开启md5戳，默认所有放在cdn中的文件都打上MD5戳；
  release: '/' + static_path + '/cdn/$0'
});
// 压缩js文件
fis.media('cdn').match('*.{js,es}', {
  optimizer: fis.plugin('uglify-js') //使用插件
});

//找个地方放一下insert的html...
fis.media('cdn').match('htmlInsert/*.html', {
  release: '/' + static_path + '/cdn/module/$0'
});

// 压缩css文件
fis.media('cdn').match('*.{less,css}', {
  optimizer: fis.plugin('clean-css')
});

//不需要发布的文件列表
fis.set('project.ignore', [
  'fis-conf.js',
  'gulpfile.js',
  '.git/**',
  '*.bat',
  '*.sh',
  'node_modules/**',
  'package-lock.json'
]);

mark一下 仅供参考 欢迎更正补充 Thanks

---

参考资料：
官网：http://fis.baidu.com/fis3/ind...
npm关于jello的介绍：https://www.npmjs.com/package...
jello+velocity模板:
https://wenku.baidu.com/view/...
http://fex.baidu.com/blog/201...