fis3使用起步

构建命令
 
 

  
  
fis3 release -d <path>
 
 
 
 

  
  ex:  构建发布到项目目录output目录下
 
 
 
 

  
  
 
 
 
 

  
  配置文件
 
 
 
 

  
  默认配置文件为fis-config.js.
 
 
 
 

  
  配置接口：
 
 
 
 

  
  fis.match(selector,props);//selector 一个字符串用来匹配要编译的文件，props编译规则属性，包括文件属性和插件属性。
 
 
 
 

  
  fis.media()接口提供多种状态功能；fis release <media>
 
 
 
 

  
  文件指纹：
 
 
 
 

  
  唯一标识一个文件，引用url添加MD5戳
 
 
 
 

  
  压缩资源：
 
 
 
 

  
  为了减少资源网络传输的大小，通过压缩器对 js、css、图片进行压缩是一直以来前端工程优化的选择。
 
 
 
 

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

  
       optimizer:fis.plugin('clean-css')
 
 
 
 

  
  });
 
 
 
 

  
  CssSprite图片合并
 
 
 
 

  
  对图片进行合并，减少请求数量。 FIS3 构建会对 CSS 中，路径带 ?__sprite 的图片进行合并。为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理。
 
 
 
 

  
  li.list-1::before {
 
 
 
 

  
       background-image: url('./img/list-1.png?__sprite');
 
 
 
 

  
  }
 
 
 
 

  
  li.list-2::before{
 
 
 
 

  
       background-image: url('./img/list-2.png?__sprite');
 
 
 
 

  
  }
 
 
 
 

  
  // 启用 fis-spriter-csssprites 插件
 
 
 
 

  
  fis.match('::package', {
 
 
 
 

  
       spriter:fis.plugin('csssprites')
 
 
 
 

  
  })
 
 
 
 

  
  // 对 CSS 进行图片合并
 
 
 
 

  
  fis.match('*.css', {// 给匹配到的文件分配属性 `useSprite`
 
 
 
 

  
       useSprite: true
 
 
 
 

  
  });
 
 
 
 

  
  
 
 
 
 

  
  调试
 
 
 
 

  
  内置webServer
 
 
 
 

  
  文件监听
 
 
 
 

  
  自动刷新
 
 
 
 

  
  发布到远端机器
 
 
 
 

  
  
 
 
 
 

  
  内置语法
 
 
 
 

  
  资源嵌入
 
 
 
 

  
  1.在html中嵌入资源：
 
 
 
 

  
  给资源加？__inline参数来标记资源嵌入需求。
 
 
 
 

  
  ex: <link rel="stylesheet" type="text/css" href="demo.css?__inline">
 
 
 
 

  
  编译后： <style>img { border: 5px solid #ccc; }</style>
 
 
 
 

  
  <script type="text/javascript" src="demo.js?__inline"></script>
 
 
 
 

  
  编译后： <script type="text/javascript">console.log('inline file');</script>
 
 
 
 

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

  
  编译后： <h1>demo.html content</h1>
 
 
 
 

  
  2.在JS中嵌入资源：
 
 
 
 

  
  在js中，使用编译函数 __inline() 来提供内容嵌入能力。
 
 
 
 

  
  ex： __inline('demo.js');
 
 
 
 

  
  编译后: console.log('demo.js content');
 
 
 
 

  
  var img = __inline('images/logo.gif');
 
 
 
 

  
  编译后： var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';
 
 
 
 

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

  
  编译后： var css = "body \n{ color: red;\n}";
 
 
 
 

  
  3.在css中嵌入资源：
 
 
 
 

  
  可以通过添加 ?__inline 编译标记都可以把文件内容嵌入进来，
 
 
 
 

  
  ex: @import url('demo.css?__inline');
 
 
 
 

  
  编译后： img { border: 5px solid #ccc; };
 
 
 
 

  
  资源定位
 
 
 
 

  
  1.在html中定位资源
 
 
 
 

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

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

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

  
  release:'/static/pic/$1',
 
 
 
 

  
  //访问url是/oo/static/baidu/xxxu
 
 
 
 

  
  rl:'/oo/static/baidu$0'
 
 
 
 

  
  });
 
 
 
 

  
  2.在JS中定位
 
 
 
 

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

  
  ex: var img = __uri('images/logo.gif');
 
 
 
 

  
  编译后： var img = '/images/logo_74e5229.gif';
 
 
 
 

  
  var css = __uri('demo.css');
 
 
 
 

  
  编译后： var css = '/demo_7defa41.css';
 
 
 
 

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

  
  3.在css中定位资源
 
 
 
 

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

  
  ex： @import url('demo.css');
 
 
 
 

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

  
  .style {
 
 
 
 

  
  background: url('images/body-bg.png');
 
 
 
 

  
  }
 
 
 
 

  
  编译后： .style {
 
 
 
 

  
  background: url('/images/body-bg_1b8c3e0.png');
 
 
 
 

  
  }
 
 
 
 

  
  
 
 
 
 

  
  声明依赖
 
 
 
 

  
  

   
   声明依赖能力为工程师提供了声明依赖关系的编译接口。FIS3 在执行编译的过程中，会扫描这些编译标记，从而建立一张 静态资源关系表，资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包等信息。使用 FIS3 作为编译工具的项目，可以将这张表提交给后端或者前端框架去运行时根据组件使用情况来 按需加载资源或者资源所在的包，从而提升前端页面运行性能。
  
  
  
  

   
   1.在html中声明依赖
  
  
  
  

   
   用户可以在html的注释中声明依赖关系
  
  
  
  

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

   
   默认情况下，只有js和css文件会输出到manifest.json表中，如果想将html文件加入表中，需要通过配置 useMap 让HTML文件加入 manifest.json，例如：
  
  
  
  

   
   //fis-conf.js
  
  
  
  

   
   fis.match('*.html', {
  
  
  
  

   
        useMap: true
  
  
  
  

   
   })
  
  
  
  

   
   2.在js中声明依赖
  
  
  
  

   
   在注释中用@require字段标记依赖关系；
  
  
  
  

   
   ex:
  
  
  
  

   
   /**
  
  
  
  

   
    *@require demo.css
  
  
  
  

   
   *@require list.js
  
  
  
  

   
   */
  
  
  
  

   
   3.在CSS中声明依赖
  
  
  
  

   
   注释中的@require字段 标记的依赖关系
  
  
  
  

   
   ex:
  
  
  
  

   
   /** * demo.css * @require reset.css */