fis3初体验，如何构建第一个前端demo？

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

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

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

下载fis3的官方demo

fis3的官方demo地址见这里：

• https://github.com/fex-team/fis3/blob/dev/doc/demo/demo-simple.tar.gz

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

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

fis-conf.js文件

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

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

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

查看发布结果

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

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

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

小结论

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

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

• https://newsn.net/tag/fis3/

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