fis3-learn - 2 配置篇
2015-08-07 11:39
441 查看
fis3-learn - 2 配置篇
功能组合
!!!此部分内容只是汇总仅供参考,详细内容见http://fis.baidu.com/fis3/docs/beginning/intro.html
建议先大致看一遍下面内容,然后到上面链接详细了解,再回来看汇总
1. 用 FIS3 做压缩、文件指纹、图片合并、资源定位
fis3 release时添加 md5、静态资源压缩、css 文件引用图片进行合并
// 加 md5 fis.match('*.{js,css,png}', { useHash: true }); // 启用 fis-spriter-csssprites 插件 fis.match('::package', { spriter: fis.plugin('csssprites') }) // 对 CSS 进行图片合并 fis.match('*.css', { // 给匹配到的文件分配属性 `useSprite` useSprite: true }); fis.match('*.js', { // fis-optimizer-uglify-js 插件进行压缩,已内置 optimizer: fis.plugin('uglify-js') }); fis.match('*.css', { // fis-optimizer-clean-css 插件进行压缩,已内置 optimizer: fis.plugin('clean-css') }); fis.match('*.png', { // fis-optimizer-png-compressor 插件进行压缩,已内置 optimizer: fis.plugin('png-compressor') });
2. 上面配置追加如下配置,fis3 release debug
启用 media debug 的配置,覆盖上面的配置,把诸多功能关掉。
fis.media('debug').match('*.{js,css,png}', { useHash: false, useSprite: false, optimizer: null })
** 启动服务服务知识小补充
- 使用`fis server open ` 可以打开编译目录, - 使用`fis server info` 可以查看server配置信息 - 使用`fis server clean` 可以清空编译目录 - 使用`fis3 release -wL` `w`参数可以对文件进行监听修改文件会构建发布。而且其编译是增量的,编译花费时间少。`L`参数浏览器自动刷新
3. 上传测试服务器
// 其他配置 ... fis.media('qa').match('*', { deploy: fis.plugin('http-push', { receiver: 'http://cq.01.p.p.baidu.com:8888/receiver.php', to: '/home/work/htdocs' // 注意这个是指的是测试机器的路径,而非本地机器 }) });
这样就可以使用
fis3 release qa上传测试机器,
fis3 release产出到本地测试服务器根目录
4. 替代内置Server
FIS3 内置了一个 Web Server 提供给构建后的代码进行调试。如果你自己启动了你自己的 Web Server 依然可以使用它们。假设你的 Web Server 的根目录是 /Users/my-name/work/htdocs,那么发布时只需要设置产出目录到这个目录即可。
fis3 release -d /Users/my-name/work/htdocs
如果想执行 fis3 release 直接发布到此目录下,可在配置文件配置;
fis.match('*', { deploy: fis.plugin('local-deliver', { to: '/Users/my-name/work/htdocs' }) })
5. 补充配置
示例在上一篇起步里下载的 demo-lv1 里面可以看到两套配置方案,用
fis3 release dev -ld ./output和
fis3 release production -ld ./output-production进行区分,
其中,dev为默认,如果不写默认使用dev里面的配置
// default settings. fis3 release fis .media('dev') .match('**', { useHash: false }); // fis3 release production fis .media('production') .match('*.js', { optimizer: fis.plugin('uglify-js') }) .match('*.{css,scss}', { optimizer: fis.plugin('clean-css') }) .match('*.png', { optimizer: fis.plugin('png-compressor') });
在上一篇起步篇下载的文件中有demo-lv1.zip初级示例和fis3-demo.zip综合示例,建议分别尝试一下
fis中一共包含一下三个命令
fis3 install fis3 release fis3 server
分别是安装插件,编译部署,发布到服务器(其中服务器支持php,nodejs等模拟服务器)
以上三条命令基本解决了大部分前端问题
更详尽的内容都在fis-conf.js文件配置参数里面,本文总结了大部分常用配置,建议完整看完官方配置内容再回来看会中内容
fis支持glob语法,对于正则不是很好的童鞋也是个福音哈
行文匆忙难免会有纰漏,如果发现错误请在评论中指出,持续更新……
相关文章推荐
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 深入探寻seajs的模块化与加载方式
- 前端必备神器 Snap.svg 弹动效果
- JavaScript的模块化:封装(闭包),继承(原型) 介绍
- 一张Web前端的思维导图分享
- 对Web开发中前端框架与前端类库的一些思考
- 浅谈AngularJS--基础
- 浅谈AngularJS--域变量(scope)
- AngularJS' Internals In Depth(深入理解 AngularJS)
- 3ff8 javascript 获取Flash下载进度兼容IE, FireFox,Chrome浏览器
- Pongo网页版JavaScript源代码及设计思路
- 拟物设计和Angular的实现 - Material Design (持续更新)
- 小明版前端工程师装x和面试指南
- 泡WeX5论坛,就能把钱给挣了! WeX5论坛 金币制启动 -- 让大家帮助大家,让知识变成收益
- 使用Spring扩展最小化模块配置
- Exchange 2007 前端 IIS 内存占用过高