fis2 入门-->fis3使用

 API:     http://fex-team.github.io/fis-site/docs/beginning/getting-started.html    【-v2.0】

 API:    http://fis.baidu.com/fis3/api/index.html   【-3.0】

写在前面的话： 本文主要目的是主要教会新手使用fis从2.0到3.0的使用，非技术博，为使用文，技术宅可以跳出了。

 fis  是采用node 开发发布在npm上的项目：是百度前端自动化前后端部署的一套自己的框架，使用者也比较多，算是国内比较成熟的前端集成化的框架，因此做一个学习跟介绍。本文也是自己在学习过程中一点点记录下来的学习过程。 吸根烟，开始咯。

 

1. 使用 fis 只需要三条命令： 

fis server -h           //  查看帮助

fis server strart    //  开启服务

fis server open    //  查看fis的根目录

fis release           //  进行编译并且发送文件到指定的目录 默认的是无服务www目录，会自动将当前项目投送到该目录下面，并且会产生一个map.json文件，该文件是静态资源产出的映射文件。

2. hello world的运行

    cmd 下进入自己的项目目录, 或者随意创建一个Hello word!的项目 在cmd下进入

   fis server start  -->会在默认的浏览器中打开项目

   fis release  ->投送到fis的服务器目录下面

   fis open     ->查看根目录该文件是否存在 

    f5                -> 刷新页面    HELLO WORLD 生成

   

3. 静态资源的压缩

     用fis提供的在线案例,先安装fis的包管理工具lights:   npm install -g lights

    下拉这个fis-quickstart-demo的案例：  lights install fis-quickstart-demo  或者自己下载： https://github.com/hefangshi/fis-quickstart-demo.git 体验fis的使用

    cd .. 进入quickstart项目

    fis release

    fis open 

    fis release -o  自动进行压缩，也可以在fis-config.js中配置进行过滤。

    配置 fis-conf.js 设置需要合并的文件，通过 fis releaser -p 进行合并，也可以通过 fis  release -pd ./output 一次指定合并后并且进行输出到output这个文件夹下面。

  
4. 静态资源操作后的替换

   fis 本身不会进行静态资源的替换，可以使用插件fis-postpackager-simple【npm install -g fis-postpackager-simple 】 进行替换，在 config.js 中进行配置【具体配置在文章后面有源代码】，然后重新构建项目，就会进行自动的替换
  fis release -omp

5. md5戳 或者  时间戳的配置见文件目录： fis release -om

    fis 对所有的静态资源添加 MD5 的版本号，同事更新资源引用路劲，是缓存利用率达到最高。fis release -m

    fis 中md5是根据文件内容hash版本冗余机制计算出来的，用户代码是不需要修改的

    好处： 线上的a.js，上线的时候先上js因为是带着hash的，不会影响线上效果，然后上html代码，回滚的时候无需回滚js，只需要回滚html代码即可。这样子带着hash的静态资源会永久的缓存，增大了缓存的利用率

    也可以使用时间戳的形式进行配置

6.  雪碧图的自动合并

    图片的css spirte功能 ：fis release -p 来进行控制的

    前提是在样式添加标示，?__sprite 就可以了： eg: url(./icons/icon_02.gif?__sprite)

   把图片内嵌为base64编码，再一次减少页面的请求数量：

   只需要在使用的时候在图片后面添加 ?_inline 就可以自动产生了

    eg:background:url(../images/a.png?__inline ); 特别是对移动端的优化性能特比的好,必不可少的优化方案

    fis release -opmd ./output      // 可以一起连着写，但是必须是d后面跟着的是文件下的名称

  
 fis.con.js的主要配置：  以fis-quickstart-demo-master为参考案例进行的说明

1. // 设置图片合并的最小间隔
   fis.config.set('settings.spriter.csssprites.margin', 20);
   
   // 取消下面的注释开启simple插件，注意需要先进行插件安装 npm install -g fis-postpackager-simple  该插件是fis的打包
   fis.config.set('modules.postpackager', 'simple');
   
   // 取消下面的注释设置打包规则
   fis.config.set('pack', {
        '/pkg/lib.js': [
            'js/lib/jquery.js',
            'js/lib/underscore.js',
           'js/lib/backbone.js',
            'js/lib/backbone.localStorage.js',
       ],
        // 取消下面的注释设置CSS打包规则，CSS打包的同时会进行图片合并
        '/pkg/anikin.css':  ['*.css']
    });
   
   // 取消下面的注释可以开启simple对零散资源的自动合并
    fis.config.set('settings.postpackager.simple.autoCombine', true);
   
   //  配置成t=20160815格式的时间戳
   var now = new Date();
   fis.config.set('timestamp', [now.getFullYear(), now.getMonth()+1, now.getDate(), now.getHours()].join(''));
   
   fis.config.set('roadmap.path', [
       {
           reg: /.*\.(js|css)$/,
           query: '?t=${timestamp}',
           //useSprite: true
           useHash: false
       },
       {
           reg: '**.html',
           useCache: false
       }
   ]);