fis-net-ease

FIS项目架构DEMO

这里展示的一个FIS项目最基础的文件与文件夹结构，以及fis配置

项目目录结构

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

FIS相关知识

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

1.安装FIS与相关插件

• 安装Nodejs，直接到官网下载安装http://nodejs.org/
• 安装FIS，在命令行下，输入：

    npm install -g fis

• 安装FIS需要的插件

    npm install -g fis-postpackager-simple
    npm install -g fis-parser-less
    npm install -g fis-parser-utc
    npm install -g fis-postprocessor-include

2.如何使用FIS

• html文件，需要放在src根目录下

    //表示将此html文件内容引用到该标签位置
    <link rel="import" href="inline/index.html?__inline">
    //script标签中有data-fixed属性，表示，该文件不会进行自动打包，其余的会合并成为一个js文件
    <script charset="gb2312" type="text/javascript" data-fixed="true" src="js/lib/underscore.js"></script> 

• less文件，放在css文件夹中

注意：带下划线_开头文件，不会编译成为单独文件，表示它会给其他less文件合并

• css文件

  • 需要自动合并为雪碧图的图片，在引用文件名后添加?__sprite，单个css文件中所有添加此标记的，会合并成一个单独文件
  • 那些被合并的原图，文件名必须以下划线_开头，这样打包发布，就不会出现未合并之前的图片，详情参考源码

• js文件

  • lib文件夹下的js文件会全部合并复制到打包目录pkg/下，名为lib.js
  • 非lib文件夹的js，都会自动合并打包到pgk目录下
  • 如果非lib文件，页面引用总数量只有一个，那么需要自行修改配置，详见第3点

    //引入模板，执行模板函数，返回拼接后的html，页面需要引用`unserscore.js`文件
    var under = __inline('../../template/index.tmpl');
    under({title :'test'});
    //js中，需要引用到文件的，需要这样写，打包时候才会替换为CDN路径
    var img_url = __uri('../../data/demo.png');

3.FIS中需要自己修改的配置

这里列出配置文件中需要自己手动修改的配置，在fis-conf.js中有注释，未提到的，默认情况下不要修改

• CDN路径：修改变量cdn-path，改为自己项目中的线上绝对路径
• 雪碧图倍数：移动端合并的雪碧图，不需要设置background-size，只需要修改变量css-scale值为0.5即可，默认是1
• 资源文件合并：目前只针对js文件，如果lib文件涉及引用顺序，需要修改变量pack中的数组，按顺序写合并文件即可，如果项目中只有一个非lib文件，则需要在pack中独立添加到pkg文件下
• include文件的域名：页面中需要include新闻发布系统中的页面，修改include-host为include的域名，默认情况，调试模式下，会自动拉取页面到对应位置，打包模式是不会

3.如何开始FIS

• 开发调试，进入项目的文件夹，输入命令：

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

4.打包发布代码

• 更新线上最新的dist文件夹代码，如果没有，请无视
• 修改fis-conf.js中的配置，将domain中的值，修改为线上正式资源地址，末尾不能有/
• 删除dist文件夹
• 在项目目录下，输入以下命令：

    //发布打包，o表示压缩，m表示采用md5作为版本号，p代表打包，D表示修改cdn全路径，d表示发布到dist路径下
    fis release -ompDd dist

• 输入完后，会自动打包到dist目录下
• 将除了html文件，都发布到静态资源服务器中，html就单独发布到项目对应的目录，如果出现文件相同，请选择跳过就好了，不需要知道自己具体修改了哪些文件

待补充