Componentsfis-redd5

A solution for front end develop

下载最新

  $ lights install fis-redd5
一共下载 21 次
版本0.0.1
发布时间2015-09-15 11:49:00
关键词fis,    redd5,    
维护者
代码库http://git.ucweb.local/
下载此版本
  $ lights install fis-redd5@0.0.1
授权MIT

README.md

--------- 2015.9.15 ------------ 如果把平常用到的所有组件都放在此包里,被引用到的,经过fis编译打包一起,没用到自然被丢弃,可能会比放到git上手动引用更方便些。(待检验)

--------- 2015.9.13 ------------

安装fis3:npm install -g fis3

启动fis3: (1) fis3 server start //需安装jdk或PHP环境,比较稳定 (2) fis3 server start --type node //有node环境即可

修改线上资源路径,在fis-conf.js里,修改第二个参数即可:fis.set('cdn-domain', 'http://image.uc.cn/s/uae/g/01/fisTest')

本地开发,在Git Bash上, fis3 release -wL //参数w是watch,监听文件变化,参数L是

发布,在Git Bash上:fis3 release prod -d ../publish 上一级目录会有发布好的项目包,css、js、图片等路径已自动匹配好

依赖项: npm install -g lights //lights npm install -g fis-parser-less //预处理LESS npm install -g fis-parser-sass //预处理SASS npm install -g fis3-postpackager-loader //打包插件 npm install -g fis3-packager-map //生成map npm install -g fis-optimizer-htmlmin //压缩html npm install -g fis-optimizer-uglify-js //压缩js npm install -g fis-optimizer-clean-css //压缩css npm install -g fis-optimizer-png-compressor //压缩png (有缺漏请告知)

优化的几个问题: 1、资源定位,自动匹配资源的路径; 2、资源合并,合并多个CSS、JS文件并压缩; 3、资源加MD5戳或时间戳; 4、png图片自动压缩; 5、预处理LESS、SASS; 6、自动生成雪碧图 7、资源嵌入(自动把JS、CSS、图片转base64后插入html或CSS)

前5个优化写在配置文件里,发布时自动执行

6-> spriter: fis.plugin('csssprites'), ,把false改为true,并在CSS中需要合并的图片路径后面加?__sprite useSprite: false 文档参考:http://fis.baidu.com/fis3/docs/beginning/release.html#CssSprite%E5%9B%BE%E7%89%87%E5%90%88%E5%B9%B6

7-> 在需要引入的资源后面加 ?__inline 文档参考:http://fis.baidu.com/fis3/docs/user-dev/inline.html

初始化目录结构: | |--index.html |--fis-conf.js |--readme.md |---css | |--style.css | |--test.less | |---js | |--index.js | |---images | |--xxx.png |

经fis编译后(全堆在一个文件夹,一起拉到uae): | |-- index.html |-- .css |-- .js |-- .png |-- .jpg

FIS文档:http://fis.baidu.com/fis3/docs/beginning/intro.html

Versions