fis3入门(百度出品)

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

FIS的安装
打开命令框输入下列代码。
sudo npm install -g fis3
安装过程大概需要十到十五分钟,判断是否安装成功,在命令框输入:sudo fis3 -v
然后在CMD里面是这样的提示

2462525-7cd8e9669350ef72.png

如果需要升级fis3
sudo npm update -g fis3
如果重新安装fis3
sudo npm install -g fis3

构建FIS3 的构建不会修改源码,而是会通过用户设置,将构建结果输出到指定的目录。

进入项目根目录,执行命令,进行构建。

项目根目录:FIS3 配置文件(默认fis-conf.js)所在的目录为项目根目录。

构建发布到项目目录的 output目录下
sudo fis3 release -d ./output

构建发布到项目父级目录的 dist子目录下
sudo fis3 release -d ../output

资源定位:我们在项目根目录执行命令 fis3 release -d ../output发布到目录 ../output下然后通过 atom 工具查看源码和构建结果的内容变化。


2462525-3673efb03b6d48e2.png
2462525-fac0d4e845be4a69.png

如上,构建过程中对资源 URI 进行了替换,替换成了绝对 URL。通俗点讲就是相对路径换成了绝对路径。
这是一个 FIS 的很重要的特性,资源定位。资源定位能力,可以有效地分离开发路径与部署路径之间的关系,工程师不再关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定。而工程师只需要使用相对路径来定位自己的开发资源即可。这样的好处是 资源可以发布到任何静态资源服务器的任何路径上,而不用担心线上运行时找不到它们,而且代码 具有很强的可移植性,甚至可以从一个产品线移植到另一个产品线而不用担心线上部署不一致的问题。
我们在对我们的资源进行压缩的时候只有这种是内置的插件;

fis-optimizer-uglify-js
fis-optimizer-clean-css
fis-optimizer-png-compressor

我们不需要安装这些插件我在根目录里面放了其它的压缩代码的方式, 如果有需要就安装下列插件,安装之后才能使用。

//对.less压缩成css
sudo npm install -g fis-parser-less 
//css 文件启动图片合并功能
sudo npm install -g fis3-postpackager-loader
// 对html进行压缩
sudo npm install -g fis-optimizer-html-minifier

可能有时候开发的时候不需要压缩、合并图片、也不需要 hash。那么给上面配置追加如下配置

fis.media('debug').match('*.{js,css,png}', { 
useHash: false,
 useSprite: false, 
optimizer: null
})

这样我们的压缩打包文件 就配置好啦;调试目录构建时不指定输出目录,即不指定 -d 参数时,构建结果被发送到内置 Web Server 的根目录下。此目录可以通过执行以下命令打开。
sudo fis3 server open
发布
sudo fis3 release
不加 -d参数默认被发布到内置 Web Server的根目录下,当启动服务时访问此目录下的资源。
启动
sudo fis3 server start
来启动本地 Web Server,当此 Server 启动后,会自动浏览器打开 http://127.0.0.1:8080,默认监听端口 8080通过执行以下命令得到更多启动参数,可以设置不同的端口号(当 8080 占用时)
sudo fis3 server -h
浏览器自动刷新
sudo fis3 release -wL

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,724评论 6 342
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 今天要谈的这本书,我是一口气看完的,中间没有做章节总结,没有去批判性思考,没有跟自己的过往去联系和对比,就这么一口...
    马行万里008阅读 1,930评论 2 6
  • 躺在床上翻来复去睡不着的小如问自己,今天这么特殊的一天,自己究竟想要什么呢?鲜花?红包?晚餐?都不是 其实她只想要...
    娄仙阅读 338评论 0 0