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

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

下载fis3的官方demo

fis3的官方demo地址见这里:

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

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

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

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

fis-conf.js文件

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

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

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

发布命令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

查看发布结果

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

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

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

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

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

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

小结论

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

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

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