Fis简介

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

一, 安装nodejs 和 npm;

二, 启动并编译项目;

fis server start 启动8080端口；
fis server stop 关闭项目

fis server open 打开8080端口所在目录；

cd 到本地项目目录执行 fis release
命令会将编译项目并发布至本地调试服务器。

npm server -h 查看帮助；
fis release -m 加MD5并发布至本地调试服务器；
fis release -o 压缩静态资源并发布至本地调试服务器；
fis release -omd ./pkg 压缩、加MD5并发送到pkg文件夹内；
fis release -p 资源合并并发布至本地调试服务器；
fis release -pd ./pkg 资源合并并发送到pkg文件夹内

三, fis 静态资源MD5版本

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

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

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

四, fis 静态资源压缩

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

fis release --optimize  //fis release -o

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

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

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

五, 静态资源合并

1，设置打包

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

fis.config.set(
    'pack',{
        'pkg/lib.js':[ '/js/**.js' ],
        'pkg/aio.css':[ '/css/**.css' ]
    }
);

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

2，安装插件

npm install fis-postpackager-simple -g；

然后配置fis-conf.js ：

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

3，应用打包

fis release --pack   //fis release -p

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

4，自动打包

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

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

再次运行FIS构建项目

fis release -p

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

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

fis release -d <path>

任意目录
fis release -h 获取更多参数

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

fis release -d ./output

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

fis release -d ../dist

3.发布到其他盘（Windows）

fis release -d D:\output

七,8080端口被占用

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

fis server start -p [port]

八,辅助开发

语言扩展

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

1,less插件安装:

npm install -g fis-parser-less

开启插件

//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文件

body {
    .container {
        width: 980px;
    }
}

使用发布到output目录中

fis release -wd output

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

body .container {
  width: 980px;
}

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

2,sass插件安装:

npm install fis-parser-node-sass -g

fis2开启插件:

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两个文件。

fis release --watch #fis release -w

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

4,自动刷新

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

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

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

九,资源定位

html资源定位

添加配置，调整文件发布路径：

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'
            }
        ]
    }
});

编译得到：

<!--源码：
<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和发布目录不一致。比如：

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$&'
            }
        ]
    }
});

再次编译得到:

<!--源码：
<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路径。

源码:
var img = __uri('images/logo.gif');
编译后
var img = '/images/logo_74e5229.gif';

源码:
var css = __uri('demo.css');
编译后
var css = '/demo_7defa41.css';

源码:
var js = __uri('demo.js');
编译后
var js = '/demo_33c5143.js';

在css中定位资源

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

源码：
@import url('demo.css');
编译后
@import url('/demo_7defa41.css');

源码：
.style {
    background: url('images/body-bg.png');
}
编译后
.style {
    background: url('/images/body-bg_1b8c3e0.png');
}

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

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'
            }
        ]
    }
});

再次编译得到：

源码：
@import url('demo.css');
编译后
@import url('/static/css/demo_7defa41.css');

源码：
.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 :

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

html中嵌入样式文件 :

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

html中嵌入脚本资源 :

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

html中嵌入页面文件

源码（推荐使用）：
<link rel="import" href="demo.html?__inline">
编译后
<h1>demo.html content</h1>

在js中嵌入资源

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

在js中嵌入js文件

源码：
__inline('demo.js');
编译后
console.log('demo.js content');

在js中嵌入图片base64

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

在js中嵌入其他文本文件

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

在css中嵌入资源

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

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

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

在css中嵌入图片的base64

源码：
.style {
    background: url(images/logo.gif?__inline);
}
编译后
.style {
    background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}

FIS - 前端工程构建工具

解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题