我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文中,苏南大叔继续描述百度出品的前端构建工具fis3。还没有安装好fis3的同学,请参见苏南大叔的fis3安装教程,链接见文末。

苏南大叔:fis3初体验,如何构建第一个前端demo? - fis3-start
fis3初体验,如何构建第一个前端demo?(图8-1)

在本文中,苏南大叔将要演示:如何利用fis3,对官方提供的demo进行构建。让大家对fis3的基本功能,有个简单的认识。

下载fis3的官方demo

fis3的官方demo地址见这里:

但是,不会玩github的同学,肯定一脸懵逼,这个.tar.gz文件咋显示的是个网页.... 这个,对于神奇的github,当然是不会按常理出牌了。想要下载的话,需要点击右小角的一个download按钮才可以下载。

苏南大叔:fis3初体验,如何构建第一个前端demo? - fis3-demo-download
fis3初体验,如何构建第一个前端demo?(图8-2)

不过,如果您手头有任何的纯正的html静态页(比如各种建站模板)的话,就不要下载这个demo了。拿来做实验都是一样一样的效果。而且官方的这个demo其实也挺难看的。

苏南大叔:fis3初体验,如何构建第一个前端demo? - fis3-demo-folder
fis3初体验,如何构建第一个前端demo?(图8-3)

fis-conf.js文件

确认一下根目录下面,是不是有fis-conf.js这个文件。如果没有,就新建一个空文件。名字叫做fis-conf.js即可。这个文件,是个风向标之类的作用,很重要的说。

官方的demo里面的这个fis-conf.js文件,里面的内容也全部是注释掉的。所以,苏南大叔就理解为空文件好了。

苏南大叔:fis3初体验,如何构建第一个前端demo? - fis3-config
fis3初体验,如何构建第一个前端demo?(图8-4)

发布命令fis3 release

下面公布的就是fis3最常用最实质的命令了,fis3 release。格式如下:

fis3 release -d <path>

注意体会<path>路径为自己的路径,可以使用./或者../。或者绝对定位路径,都是可以的。比如:

fis3 release -d ./output
fis3 release -d ../dist
fis3 release -d e:\output

这个<path>路径非常重要,因为它保存了被fis3处理过的相关文件结果。所以,大家请一定要头脑清醒的知道,自己传递了个什么样的<path>路径。

苏南大叔:fis3初体验,如何构建第一个前端demo? - fis3-release
fis3初体验,如何构建第一个前端demo?(图8-5)

查看发布结果

从发布结果对比上来看,除了配置文件fis-config.js没有复制过来,其余的静态文件都被复制过来了。

苏南大叔:fis3初体验,如何构建第一个前端demo? - folder-compare
fis3初体验,如何构建第一个前端demo?(图8-6)

当然,苏南大叔这里通过更好用winmerge来对比一下文件区别。看一下效果。官方demo运行完之后,效果就是所有的资源引用的相对路径./,变成了相对根目录的路径/(就是绝对路径了)。仅此而已,没有其它的变化。这里的所有的资源引用,就不局限于html中引用js/css,或者css里面引用图片了。

注意:变成相对根目录的路径/之后,就必须放在某个server才能看到效果了,不能双击打开浏览器看效果了。你懂的。

苏南大叔:fis3初体验,如何构建第一个前端demo? - code-1
fis3初体验,如何构建第一个前端demo?(图8-7)

苏南大叔:fis3初体验,如何构建第一个前端demo? - code-2
fis3初体验,如何构建第一个前端demo?(图8-8)

小结论

这里的fis3的官方演示效果并不是很好,这都是因为fis-config.js这个文件是个空文件的缘故。如果要充分发挥fis3的强大功能,就需要继续配置fis-config.js文件了。

想知道更多fis3前端构建工具的使用秘诀么?请点击苏南大叔的fis3后续系列文章链接。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    fis3