网站服务部小组文档

FIS3升级说明

FIS3的升级是势在必行，FIS3和FIS2使用方式大致相同，这里主要讲一下从FIS2到FIS3要注意的内容

FIS3-DEMO，请猛击这里

重要说明

  • NodeJs版本必须安装v0.12.x版本，不能安装5.x和io的版本
  • 每次更新feg的时候，需要先停止server，就是需要feg server stop，之后切换到非C盘下更新
  • npm源比较慢，可以使用淘宝的源进行安装

FIS3更新

2015.12.24

FIS3与FIS2的区别

  • FIS2采用配置方式，跟Grunt类似，而FIS3采用函数调用方式，跟Gulp类似
  • 插件基本是通用的，有些不兼容的，已经做了修改
  • FIS3可以支持打相对路径的本地包
  • FIS3打包不再需要输入类似-ompDd这种，因为配置文件里已经定义好了
  • FIS3的命令基本与FIS2保持一致，就可能是你需要输入多个3
  • FIS3和FIS2可以共存于一台机器上，因为调用的命令不
  • FIS3的定义插件的使用会更合理，可以针对本地、测试、正式等环境调用不同插件与参数

项目目录结构

    src    //存放该项目源码
    |--css  //存在所有less文件和css文件
    |    |--_reset.less  //重置页面默认样式（可以直接使用）
    |    |--_common.less  //项目中通用样式（需要自行修改）
    |    |--index.less  //项目中对应模块或者页面的样式（这个只是例子，需要自行修改与添加）
    |--img  //存放所有图片文件
    |--data //存放不希望打包后的文件有版本号
    |--config //存在配置文件
    |--inline  //存在所有需要被引用的模块html文件（例如多个页面公用的header，footer等等，或者是一个页面太长了，将各自模块放于此）
    |--js    //所有js文件
    |    |--app   //与项目逻辑相关的js文件，例如`index.js`
    |    |--common   //项目中公用的js文件
    |    |--lib     //项目中需要用到的第三方库与插件，例如`baiduTemplate.js`，`jquery.slider.js`等
    |--template        //项目中需要用到的模板
    |    |--index.tmpl  //示例模板文件
    |--index.html     //项目中需要的页面html文件

项目发布后的结构

    dist    //存放需要发布的文件
    |--css    //这里是所有编译好的less转css的文件
    |--img     //所有需要发布的img
    |--pkg    //这里是已经自动打包合并好的js和css文件，以及lib合并文件
    |--data  //这里是存不需要添加版本号的资源(img,css,js)
    |--index.html     //修改完毕的html

FIS3相关知识

如何安装FIS3，如何使用来开发，如何使用来打包发布等

1.安装FIS3的解决方案feg（基于小组的）

  • 安装Nodejs，直接到官网下载安装http://nodejs.org/
  • 安装feg，在命令行下，输入：
    npm install -g feg
  • 不需要额外安装其他插件，解决方案会集成

2.如何初始化基于FIS3的项目

希望基于FIS3的项目，不需要手动自己去建立文件夹结构与下载fis-conf.js的配置文件

  • 请确保有安装Git以及能使用Git命令(需要将Git目录下的bin路径添加到环境变量PATH中)
  • 在空白文件夹中，输入命令：
    git clone https://git-wz.nie.netease.com/nie-comm/fis3-project-demo.git  //获取基于fis3的通用模板
    git clone https://git-wz.nie.netease.com/nie-comm/fis3-cms-project.git //获取基于fis3的cms模板
  • 修改文件夹名为自己项目的名字
    //添加-n参数表示不新建文件夹，直接copy项目内容到当前文件夹
    feg get fis3 -n

3.如何使用FIS3，大致与FIS2一致，不同点在于

  • JS、CSS文件不在使用data-fixed="true"来区分是否合并了
    //script标签背后<!--ignore-->，表示，该文件不会进行自动打包，其余的会合并成为一个js文件
    <script charset="gb2312" type="text/javascript" src="js/lib/baiduTemplate.js"></script><!--ignore-->
  • JS的合并使用如下方式：
    fis.match('src/js/lib/*.js',{
        packTo : 'pkg/lib.js'
    });

4.FIS3中需要自己修改的配置（与FIS2一致）

5.如何开始FIS3

  • 开发调试，进入项目的文件夹，输入命令：
    //这句是启动一个本地服务，输入完后，会自动打开浏览器，定位到：http://127.0.0.1:8080
    feg server start
    //这句是编译源码`src`文件夹下的，然后监听文件变化，自动编译，以及开启livereload，自动刷新浏览器（IE不支持）
    feg release -wL

6.打包发布代码

  • 修改fis-conf.js中的配置，将domain中的值，修改为线上正式资源地址，末尾不能有/
  • 删除dist文件夹（务必）
  • 在项目目录下，输入以下命令：
    //发布打包
    feg release dist //打为测试环境的包
    feg release release //打为发布环境的包

    //打包一个相对路径的包，本地包不会用include
    feg release local

FEG其他功能

  • 压缩PNG图片(使用pngquant压缩，质量跟效果跟tinypng类似)
    //在当前路径下输入以下命令，最后会在当前目录下多出一个output文件夹，存放压缩后的图片
    feg compress png
  • 压缩JPG图片(使用imagemin-jpg压缩)
    //在当前路径下输入以下命令，最后会在当前目录下多出一个output文件夹，存放压缩后的图片
    feg compress jpg 60
    //最后参数60为压缩质量，默认不填为60

待补充