构建工具fis3的使用

（1）release发布命令

fis3 release -d <path>

<path>任意目录

fis3 release -h 获取更多参数

fis3 server start

启动内置服务器

fis3 server -h 获取更多参数

fis3 server open

打开内置服务器目录，不指定发布地址则默认发布到内置服务器中

自己的服务器替代内置Server

使用配置后 执行 fis3 release 即可

fis.match('*', { deploy: fis.plugin('local-deliver', { to: '/Users/my-name/work/htdocs' })})

fis3 release -w

文件监听

停止程序用快捷键 CTRL+c

fis3 release -wL

浏览器自动刷新

程序停止用快捷键 CTRL+c

配置文件写法 fis-conf.js

fis.match(selector, props);

selector：FIS3 把匹配文件路径的路径作为selector，匹配到的文件会分配给它设置的 props

props：编译规则属性，包括文件属性和插件属性，更多属性

fis.media()配置多种状态

比如：

fis3 release rd push 到 RD 的远端机器上

fis3 release qa push 到 QA 的远端机器上

fis.media('prod').match('*.js', { optimizer: fis.plugin('uglify-js')});

fis3 release prod 使用定义的prod方案

（2）资源定位

FIS3 支持对html中的script、link、style、video、audio、embed等标签的src或href属性进行分析

js资源定位 __uri(path) 改变写法：

源码：var js = __uri('demo.js');

编译后var js = '/static/js/demo_33c5143.js';

css资源定位不改变写法，但要使用url() src=''

fis编译工具会识别css文件或 html的style标签内容 中 url(path) 以及 src=path 字段

源码：@import url('demo.css');

编译后@import url('/demo_7defa41.css');

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

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

（3）配置文件的写法

fis.match('*.{js,css,png,gif}', {

    useHash: true // 开启 md5 戳

});

// 所有的 js

fis.match('**.js', {

    //发布到/static/js/xxx目录下

    release : '/static/js$0'

});

// 所有的 css

fis.match('**.css', {

    //发布到/static/css/xxx目录下

    release : '/static/css$0'

});

// 所有image目录下的.png，.gif文件

fis.match('/images/(*.{png,gif})', {

    //发布到/static/pic/xxx目录下

    release: '/static/pic/$1'

});

（4）依赖声明

默认只有js和css文件会输出到manifest.json表中

添加html依赖只需配置如下

// fis-conf.js

fis.match('*.html', {

    useMap: true

});

html依赖声明

<!--

    @require demo.js

    @require "demo.css"

-->

css依赖声明

/**

 * demo.css

 * @require reset.css

 */

js依赖声明

//demo.js

/**

 * @require demo.css

 * @require list.js

 */

 （5）内容嵌入

适合合并文件，减少请求数

（5.1）在html中嵌入资源，给资源加 ?__inline

<img title="百度logo" src="images/logo.gif?__inline"/>

<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoY

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">

<!-- this is the content of demo.html -->

<h1>demo.html content</h1>

（5.2）在js中嵌入资源 __inline()

在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}";

（5.3）在css中嵌入资源 ?__inline

在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);

  }