Fis简介

FIS 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

一, 安装Nodejs 和 Npm;

二, 启动并编译项目;

  • fis server start 启动8080端口;
  • fis server stop 关闭项目
  • fis server open 打开8080端口所在目录;
  • cd 到本地项目目录 执行 fis release
  • 命令会将编译项目并发布至本地调试服务器。
  1. npm server -h 查看帮助;
  2. fis release -m 加MD5并发布至本地调试服务器;
  3. fis release -o 压缩静态资源并发布至本地调试服务器;
  4. fis release -omd ./pkg 压缩、加MD5并发送到pkg文件夹内;
  5. fis release -p 资源合并并发布至本地调试服务器;
  6. fis release -pd ./pkg 资源合并并发送到pkg文件夹内

三, Fis 静态资源MD5版本

FIS能够根据静态资源的内容自动生成文件版本,自动更新资源引用路径,解决缓存更新问题,告别手动更新时间戳。
我们通过开启 --md5 参数,为项目中的静态资源添加md5版本号.

1
fis release --optimize --md5    //fis release -m

刷新页面,我们可以看到所有资源均加上了md5版本号

四, Fis 静态资源压缩

资源压缩一直是前端项目优化中非常重要的一环,使用FIS我们无需任何配置,只需要一个命令就可以完成压缩工作。

1
fis release --optimize  //fis release -o

FIS构建并不会修改源代码目录中的内容,而是拥有独立的产出的目录,FIS默认的产出目构录可以通过 fis server open 打开,你也可以通过 fis release -d 指定你希望的输出目录:

1
fis release -od ./pkg    //资源压缩并发送到pkg文件夹内

查看网站的静态资源,我们会发现脚本、样式、图片资源都已经压缩完成。无需额外的插件和配置编写,一条命令就完成了压缩工作。

五, 静态资源合并

1,设置打包

FIS可以通过pack来进行资源文件的合并,比如我们需要将DEMO中的公共库文件打包在一起,可以修改 fis-conf.js 配置,加入pack配置

1
2
3
4
5
6
fis.config.set(
    'pack',{
        'pkg/lib.js':[ '/js/**.js' ],
        'pkg/aio.css':[ '/css/**.css' ]
    }
);

设置完pack后,FIS默认只会进行文件打包,不会对页面中的静态资源引用进行替换,我们可以通过引入后端静态资源管理来加载打包模块。不过也可以利用fis-postpackager-simple插件,可以自动将页面中独立的资源引用替换为打包资源。

2,安装插件

1
npm install fis-postpackager-simple -g;

然后 配置fis-conf.js :

1
fis.config.set("modules.postpackager","simple");//启用资源打包插件

3,应用打包

1
fis release --pack   //fis release -p

发布到调试目录下运行,可以看到已经引用了打包后的资源文件;
注:为了开发调试时更加方便 fis release默认不会合并资源,在fis release -p后,FIS才会进行打包合并处理。

4,自动打包

利用simple插件,我们还可以按页面进行自动合并,将没有通过pack设置打包的零散资源自动合并起来。

1
2
3
//file : fis-conf.js
//开启autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine'true);

再次运行FIS构建项目

1
fis release -p

我们会发现剩余的零散资源已经被自动合并.

六,FIS 的构建(编译)即是发布当前项目到其他文件夹

1
fis release -d <path>
  • 任意目录
  • fis release -h 获取更多参数

1.构建发布到项目目录的 output 目录下

1
fis release -d ./output

2.构建发布到项目父级目录的 dist 子目录下

1
fis release -d ../dist

3.发布到其他盘 (Windows)

1
fis release -d D:\output

七,8080端口被占用

8080端口被占用的话 可以指定一个新端口启用;

1
fis server start -p [port]

八,辅助开发

语言扩展

使用FIS可以方便的将各种异构语言转换为前端语言,比如说可以将CoffeeScript编译为JavaScript、Less编译为CSS、前端模板预编译等等,并且可以做到各种异构语言无缝混用。

1,Less插件安装:

1
npm install -g fis-parser-less

开启插件

1
2
3
4
5
6
//file: fis-conf.js
//后缀名的less的文件使用fis-parser-less编译
//modules.parser.less表示设置后缀名为less的文件的parser,第二个less表示使用fis-parser-less进行编译
fis.config.set('modules.parser.less''less');
//将less文件编译为css
fis.config.set('roadmap.ext.less''css');

快速使用

在fis-conf.js同目录编写一个LESS文件

1
2
3
4
5
body {
    .container {
        width: 980px;
    }
}

使用发布到output目录中

1
fis release -wd output

可以看到在output目录中,原有的less文件已经被编译为了css文件

1
2
3
body .container {
  width: 980px;
}

由于我们添加了 -w 参数,你还可以随意修改LESS文件,FIS将会自动监听文件修改,自动编译发布CSS文件

2,Sass插件安装:

1
npm install fis-parser-node-sass -g

fis2开启插件:

1
2
3
4
5
6
7
8
fis.config.set('modules.parser.sass''node-sass');
fis.config.set('modules.parser.scss''node-sass');
fis.config.set('roadmap.ext.sass''css');
fis.config.set('roadmap.ext.scss''css');
fis.config.set('settings.parser.node-sass', {
    // 加入文件查找目录
    include_paths: [ ]
});

3,自动化文件监视

通过文件监视功能,我们可以要求FIS在项目文件出现修改时,自动增量构建项目文件。并且增量构建是考虑了各种嵌入关系的,比如a.css文件内嵌了b.css文件,那么当b.css文件修改时,FIS会自动重新构建a.css和b.css两个文件。

1
fis release --watch #fis release -w

随意修改项目内容,返回页面刷新即可查看到相应的变化。

4,自动刷新

我们只需要在文件监视的参数基础上添加 –live 或 -L 参数即可实现在项目文件发生修改后,自动刷新页面的功能,大幅提高页面制作效率。

1
fis release --watch --live #fis release -wL

随意修改项目内容,页面将会应用修改并自动刷新。

九,资源定位

Html资源定位

添加配置,调整文件发布路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
fis.config.merge({
    roadmap : {
        path : [
            {
                //所有的js文件
                reg : '**.js',
                //发布到/static/js/xxx目录下
                release : '/static/js$&'
            },
            {
                //所有的css文件
                reg : '**.css',
                //发布到/static/css/xxx目录下
                release : '/static/css$&'
            },
            {
                //所有image目录下的.png,.gif文件
                reg : /^\/images\/(.*\.(?:png|gif))/i,
                //发布到/static/pic/xxx目录下
                release : '/static/pic/$1'
            }
        ]
    }
});

编译得到:

1
2
3
4
5
6
7
8
9
10
11
12
<!--源码:
<img title="百度logo" src="images/logo.gif"/>
编译后-->
<img title="百度logo" src="/static/pic/logo_74e5229.gif"/>
<!--源码:
<link rel="stylesheet" type="text/css" href="demo.css">
编译后-->
<link rel="stylesheet" type="text/css" href="/static/css/demo_7defa41.css">
<!--源码:
<script type="text/javascript" src="demo.js"></script>
编译后-->
<script type="text/javascript" src="/static/js/demo_33c5143.js"></script>

我们甚至可以让 url和发布目录不一致。比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
fis.config.merge({
    roadmap : {
        path : [
            {
                //所有的js文件
                reg : '**.js',
                //发布到/static/js/xxx目录下
                release : '/static/js$&',
                //访问url是/mm/static/js/xxx
                url : '/mm/static/js$&'
            },
            {
                //所有的css文件
                reg : '**.css',
                //发布到/static/css/xxx目录下
                release : '/static/css$&',
                //访问url是/pp/static/css/xxx
                url : '/pp/static/css$&'
            },
            {
                //所有image目录下的.png,.gif文件
                reg : /^\/images\/(.*\.(?:png|gif))/i,
                //发布到/static/pic/xxx目录下
                release : '/static/pic/$1',
                //访问url是/oo/static/baidu/xxx
                url : '/oo/static/baidu$&'
            }
        ]
    }
});

再次编译得到:

1
2
3
4
5
6
7
8
9
10
11
12
<!--源码:
<img title="百度logo" src="images/logo.gif"/>
编译后-->
<img title="百度logo" src="/oo/static/baidu/logo_74e5229.gif"/>
<!--源码:
<link rel="stylesheet" type="text/css" href="demo.css">
编译后-->
<link rel="stylesheet" type="text/css" href="/pp/static/css/demo_7defa41.css">
<!--源码:
<script type="text/javascript" src="demo.js"></script>
编译后-->
<script type="text/javascript" src="/mm/static/js/demo_33c5143.js"></script>

JS资源定位

js语言中,可以使用编译函数 __uri(path) 来定位资源,fis分析js文件或 html中的script标签内内容 时会替换该函数所指向文件的线上url路径。

1
2
3
4
源码:
var img = __uri('images/logo.gif');
编译后
var img = '/images/logo_74e5229.gif';
1
2
3
4
源码:
var css = __uri('demo.css');
编译后
var css = '/demo_7defa41.css';
1
2
3
4
源码:
var js = __uri('demo.js');
编译后
var js = '/demo_33c5143.js';

在Css中定位资源

fis编译工具会识别css文件或 html的style标签内容 中 url(path) 以及 src=path 字段,并将其替换成对应资源的编译后url路径

1
2
3
4
源码:
@import url('demo.css');
编译后
@import url('/demo_7defa41.css');
1
2
3
4
5
6
7
8
源码:
.style {
    background: url('images/body-bg.png');
}
编译后
.style {
    background: url('/images/body-bg_1b8c3e0.png');
}

资源定位结果可以被fis的配置文件控制,比如添加配置,调整文件发布路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fis.config.merge({
    roadmap : {
        path : [
            {
                //所有的css文件
                reg : '**.css',
                //发布到/static/css/xxx目录下
                release : '/static/css$&'
            },
            {
                //所有image目录下的.png,.gif文件
                reg : /^\/images\/(.*\.(?:png|gif))/i,
                //发布到/static/pic/xxx目录下
                release : '/static/pic/$1'
            }
        ]
    }
});

再次编译得到:

1
2
3
4
源码:
@import url('demo.css');
编译后
@import url('/static/css/demo_7defa41.css');
1
2
3
4
5
6
7
8
9
源码:
.style {
    background: url('images/body-bg.png');
    background: url('/static/pic/body-bg_1b8c3e0.png');
}
编译后
.style {
    background: url('/static/pic/body-bg_1b8c3e0.png');
}

10, 内容嵌入

在Html中嵌入资源

在html中可以嵌入其他文件内容或者base64编码值,可以在资源定位的基础上,给资源加 ?__inline 参数来标记资源嵌入需求。

html中嵌入图片base64 :

1
2
3
4
源码:
<img title="百度logo" src="images/logo.gif?__inline"/>
编译后
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>

html中嵌入样式文件 :

1
2
3
4
源码:
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
编译后
<style>img { border: 5px solid #ccc; }</style>

html中嵌入脚本资源 :

1
2
3
4
源码:
<script type="text/javascript" src="demo.js?__inline"></script>
编译后
<script type="text/javascript">console.log('inline file');</script>

html中嵌入页面文件:

1
2
3
4
源码(推荐使用):
<link rel="import" href="demo.html?__inline">
编译后
<h1>demo.html content</h1>

在Js中嵌入资源

在js中,使用编译函数 __inline() 来提供内容嵌入能力。可以利用这个函数嵌入图片的base64编码、嵌入其他js或者前端模板文件的编译内容, 这些处理对html中script标签里的内容同样有效。

在js中嵌入js文件

1
2
3
4
源码:
__inline('demo.js');
编译后
console.log('demo.js content');

在js中嵌入图片base64

1
2
3
4
源码:
var img = __inline('images/logo.gif');
编译后:
var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';

在js中嵌入其他文本文件

1
2
3
4
源码:
var css = __inline('a.css');
编译后:
var css = "body \n{    color: red;\n}";

在Css中嵌入资源

与html类似,凡是命中了资源定位能力的编译标记, 除了src="xxx"之外,都可以通过添加 `?__inline` 编译标记都可以把文件内容嵌入进来。src="xxx" 被用在ie浏览器支持的filter内,该属性不支持base64字符串,因此未做处理。

在css文件中嵌入其他css文件

1
2
3
4
源码:
@import url('demo.css?__inline');
编译后
img { border: 5px solid #ccc; };

在css中嵌入图片的base64

1
2
3
4
5
6
7
8
源码:
.style {
    backgroundurl(images/logo.gif?__inline);
}
编译后
.style {
    backgroundurl(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}