fis-postpackager-tolist
,主要解决:需要生成很多相同的内页,比如英雄卡牌的页,以往是通过新闻发布系统解决fis-preprocessor-resload
插件,主要作用:在js文件中,能够读取某个文件夹下的资源列表路径出来,减少预加载时候,需要一个一个输入的烦恼fis-postprocessor-include
插件,支持本地与测试环境,优先加载本地的global_include
下的include文件,include中的路径要相对于文件本身fis-postpackager-supply
插件,支持include
插件的补充,补充资源的路径问题fis-parser-html-ejs
插件,主要作用:将html文件中的ejs模板语言结合对应的json文件,编译成需要的html代码替换到对应位置上,主要解决本地数据与html结构分离,但又需要将结果放在页面中,利于SEO,ejs模板语言跟原生js语法一致fis-postpackager-html-encode
插件,主要作用:将html文件中的非英文、标点符号、数字等替换为HTML转义符号,主要解决乱码问题(插件默认没有在配置文件中)fis-postprocessor-replace
插件,主要作用:替换js
文件中的变量fis-postpackager-supply
插件,主要作用:修复html文件中的a标签资源不会替换路径问题这里展示的一个FIS项目最基础的文件与文件夹结构,以及fis配置,项目源码查看:FIS-Demo
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
如何安装FIS,如何使用来开发,如何使用来打包发布等
npm install -g fis
npm install -g lights
npm install -g fis-postpackager-simple
npm install -g fis-parser-less
npm install -g fis-parser-bdtmpl
npm install -g fis-postprocessor-include
npm install -g fis-postprocessor-replace
npm install -g fis-postpackager-supply
npm install -g fis-postpackager-html-encode
npm install -g fis-parser-html-ejs
希望基于FIS的项目,不需要手动自己去建立文件夹结构与下载
fis-conf.js
的配置文件
lights install fis-net-ease
fis-net-ease
文件夹名为自己项目的名字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/baiduTemplate.js"></script>
less文件,放在css
文件夹中
注意:带下划线
_
开头文件,不会编译成为单独文件,表示它会给其他less
文件合并
css文件
?__sprite
,单个css文件
中所有添加此标记的,会合并成一个单独文件_
开头,这样打包发布,就不会出现未合并之前的图片,详情参考源码js文件
lib
文件夹下的js文件会全部合并复制到打包目录pkg/
下,名为lib.js
pgk
目录下只有一个
,那么需要自行修改配置,详见第3点
//引入模板,执行模板函数,返回拼接后的html,页面需要引用`baiduTemplate.js`文件
var under = __inline('../../template/index.tmpl');
under({title :'test'});
//js中,需要引用到文件的,需要这样写,打包时候才会替换为CDN路径
var img_url = __uri('../../data/demo.png');
这里列出配置文件中需要自己手动修改的配置,在
fis-conf.js
中有注释,未提到的,默认情况下不要修改
cdn-path
,改为自己项目中的测试环境绝对路径,修改变量cdn-path-release
,改为正式环境绝对路径background-size
,只需要修改变量css-scale
值为0.5
即可,默认是1
js
文件,如果lib文件
涉及引用顺序,需要修改变量pack
中的数组,按顺序写合并文件即可,如果项目中只有一个非lib文件,则需要在pack
中独立添加到pkg文件下include
新闻发布系统中的页面,修改include-host
为include的域名 //这句是启动一个本地服务,输入完后,会自动打开浏览器,定位到:http://127.0.0.1:8080
fis server start --type node
//这句是编译源码`src`文件夹下的,然后监听文件变化,自动编译,以及开启livereload,自动刷新浏览器(IE不支持)
fis release -wL
domain
中的值,修改为线上正式资源地址,末尾不能有/
删除dist
文件夹(务必) //发布打包,o表示压缩,m表示采用md5作为版本号,p代表打包,D表示修改cdn全路径,d表示发布到dist路径下
fis release -ompDd dist //打为测试环境的包
fis release -ompDd release //打为发布环境的包