网站服务部小组文档

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中)
  • 在空白文件夹中,输入命令:
    feg get fis3 //获取基于fis3的通用模板
    feg get fis3-cms //获取基于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

待补充