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

本文中,苏南大叔继续描述百度出品的前端构建工具fis3。还没有安装好fis3的同学,请参见苏南大叔的fis3安装教程,链接见文末。在本文中,苏南大叔将要演示:如何利用fis3,对官方提供的demo进行构建。让大家对fis3的基本功能,有个简单的认识。

下载fis3的官方demo

fis3的官方demo地址见这里:

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

fis3如何运行第一个前端构建demo - fis3-demo-download

fis3如何运行第一个前端构建demo(图7-1)

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

fis3如何运行第一个前端构建demo - fis3-demo-folder

fis3如何运行第一个前端构建demo(图7-2)

fis-conf.js文件

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

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

fis3如何运行第一个前端构建demo - fis3-config

fis3如何运行第一个前端构建demo(图7-3)

发布命令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(图7-4)

查看发布结果

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

fis3如何运行第一个前端构建demo - folder-compare

fis3如何运行第一个前端构建demo(图7-5)

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

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

fis3如何运行第一个前端构建demo - code-1

fis3如何运行第一个前端构建demo(图7-6)

fis3如何运行第一个前端构建demo - code-2

fis3如何运行第一个前端构建demo(图7-7)

小结论

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

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/fis3-demo.html
上一篇好文:如何安装百度前端构建工具fis3?
下一篇好文:fis3配置文件之整理转移资源部署路径

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~