FIS3学习笔记(一)

FIS3项目配置工具学习

前言：之前已经学习fis的基本命令和配置基础，下面开始调试和实际使用的学习

---

1. 调试

 FIS3 构建后，默认情况下会对资源的 URL 进行修改，改成绝对路径。这时候本地双击打开文件是无法正常工作的。
 1）`fis3 server open`
 fis有一个内置服务器，如果不使用 -d输出的话（直接使用`fis3 release`)，使用这句代码可以将放置在内置服务器的根目录打开。
 2）`fis3 server start`
 启动服务，同时打开网站
 3)`fis3 release -w`
 文件监听：当启动文件监听时，修改文件会构建发布
 4)`fis3 release -wl`
 浏览器自动刷新:当我修改代码时，项目会被重新打包，同时发布服务，浏览器也会跟着刷新到代码修改后的状态（开发者的福音啊）。

2.内置语法

1）嵌入资源
嵌入资源即内容嵌入，可以为工程师提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力。
eg:html中嵌入图片base64(内联图片,js等）
源码：

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

编译后：

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

eg2:
html中嵌入页面文件

源码（推荐使用）

 <link rel="import" href="demo.html?__inline">

编译后

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

在js中嵌入资源(js,图片base64编码字符串,其他文本文件）

在js中，使用编译函数 __inline() 来提供内容嵌入能力。
eg:在js中嵌入其他文本文件

源码

var css = __inline('a.css');

编译后

  var css = "body \n{    color: red;\n}";

2)定位资源

• 相对路径变为绝对路径
• 输出位置可配置
• url定位位置也可配置

// 所有的 js
fis.match('**.js', {
    //发布到/static/js/xxx目录下
    release : '/static/js$0',
    //访问url是/mm/static/js/xxx
    url : '/mm/static/js$0'
});

（1）在js中定位资源

js语言中，可以使用编译函数 __uri(path) 来定位资源；
还可以配置路径，使用该函数编译之后资源位置也会相应变化；

（2）在css中定位资源

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

3）声明依赖
在html中声明依赖

<!--
    @require demo.js
    @require "demo.css"
-->

在js中声明依赖

//demo.js
/**
 * @require demo.css
 * @require list.js
 */