做有态度的前端团队

网易FEG前端团队

项目中使用fis常见问题汇总

小组引入fis工具已经很久了,但是随着fis的推广以及新人的加入,一些常见的关于fis问题,经常被重复问到,所以本文整理汇总了fis使用过程中常见的坑。

1、node版本的问题

node版本更新有两条主线,一条是大版本更新,比如v5.6.0,官网默认推荐下载的版本是这条;另一条是小版本更新,比如v0.12.1各版本详细下载地址

而目前fis2和fis3都是基于node小版本那条线,所以一开始安装node的时候就要注意下。否则即使安装成功,后期用着会发现某些fis插件出错的问题。

2、fis2新版本无法自动编译刷新问题

虽然目前推荐用fis3,但是工作中可能还会遇到fis2的旧项目,所以fis2也要安装以备不时之需。

如果是npm install -g fis直接安装的话,会默认安装fis2的最新版本,但是fis2的最新版本用了之后发现有个问题,就是无法自动编译刷新。

建议安装1.7.22版本,npm install -g fis@1.7.22

fis2版本更新目录

3、用淘宝域解决npm安装慢的问题

npm install -g xxx --registry=http://registry.npm.taobao.org

4、fis3打本地包(也叫local包)如何配置

打local包的初衷是希望,除了路径能用相对路径,其它最好都不变,比如可以合并雪碧图、可以不发布inline和temp_file这些多余的文件夹等等。
所以需要用fis3打local包的,可以参考以下配置:

//配置打本地包
fis.hook('relative');
fis.media('local')
    .match('::package', {
        spriter: fis.plugin('csssprites',{
            layout: 'matrix',
            margin: '5px'
        })
    })
    .match('*.{css,less}',{
        useSprite : true
    })
    .match('**', {
      relative: true,
      useDomain : false,
      charset : fis.get("charset"),
      deploy: fis.plugin('encoding')
    })
    .match("**.html",{
        postprocessor : fis.plugin('include',{
            nouse : true
        })
    })
    .match('**', {
      deploy: fis.plugin('local-supply', {
          to: './local',
          exclude : ['inline','temp_file']
      })
    })

5、通过我们组内发布工具发布的项目,一定不能上传带有dist和release名字的文件夹

之前有童鞋在本地打包生成dist或者release的包,不小心上传到git上面,然后再用发布系统发布,导致无法发布的报错。因为这两个文件夹是fis内部打包后需要使用的,所以项目源码不能用。切记!

6、fis重装时要注意先把server stop

组内的fis3已经把fis3和相关常用的插件集成了feg,当我们需要update所有插件(或者update某几个,但不想一个个update),你可以重装feg:npm install -g feg。那么问题来了,如果你update之前已经启动server,因为fis的update机制是先把已经存在的删除,然后再重新装的。如果server没有stop,就会导致删除不完整,重新装的时候会卡住安装不成功。当你发现卡在再想停掉server,那时候fis命令已经失效了。这种情况下只能找到那个server进程强制停了(具体哪个进程没研究)或者重启电脑。

7、usemin插件的使用要小心

组内有个关于文件合并很方便的打包插件 fis3-postpackager-usemin
使用方法很方便:

<!--usemin js(pkg/app.js)--> //js表示合并js类的文件,括号内为合并后的文件路径与名称
<script charset="gb2312" type="text/javascript" src="js/common/common.js"></script>
<script charset="gb2312" type="text/javascript" src="js/app/index.js"></script>
<!--end-->

这里存在的问题是,如果你有多个文件,合并后的文件路径和名称一定是要唯一的。这是一开始使用的时候,很多人忽略的一个问题,很有可能导致打包后,发现一个页面的资源请求不到。举个例子:
文件一:

<!--usemin js(pkg/index1.js)--> //js表示合并js类的文件,括号内为合并后的文件路径与名称
<script charset="gb2312" type="text/javascript" src="js/common/common.js"></script>
<script charset="gb2312" type="text/javascript" src="js/app/index1.js"></script>
<!--end-->

文件二:

<!--usemin js(pkg/index2.js)--> //js表示合并js类的文件,括号内为合并后的文件路径与名称
<script charset="gb2312" type="text/javascript" src="js/common/common.js"></script>
<script charset="gb2312" type="text/javascript" src="js/app/index2.js"></script>
<!--end-->

8、fis编译自动补全html标签未闭合的坑

什么鬼?自动补全未闭合的标签也是坑(估计fis人员看到这个都喊冤)?!!比如:
编译前:

<div class="name">
    <span>我是span标签

fis编译后:

<div class="name">
    <span>我是span标签</span>
</div>

这个。。。补全本身是好事,可以修正程序员对于这种常识性的错误,但是在一些特殊场景下,可能会带来烦恼。
比如,我们的项目经常会使用include来引入一些公用的模块,那么如果刚好我的某个模块,标签闭合是分开到不同html文档的,理论上,两个文档合在一起(include服务器把一个html代码模块原封不动的合并进来的)标签是没问题。
但是,因为中间有fis编译这一步,把残缺的那个代码块文档的标签补全闭合了,那么到时候服务器include进来,实际是会出现标签多了而导致布局错乱了。
当然,正常的写法很少出现这种把同一个标签分到两个文档(这种写法很蛋疼,不利于后期人维护,非常不推荐),只是最近遇到一个13年的项目是这样做,而之前还没有用到fis编译,现在改成fis编译就出现这个问题了。所以记下来,提醒一下大家,fis编译html文档是有自动补全未闭合的标签的功能的。

9、template板里面的动态图片路径不会自己替换成绝对路径

首先何为动态图片,比如:

<img src="<%- picname %>"/>

这里图片是通过传入数据到模板引擎的,图片地址是变化的。理想的情况是,我传入一个相对路径,然后fis帮我替换成绝对路径,然而并不是。因为普通的模板引擎(比如baiduTemplate.js)不是html,是最终通过js渲染的,所以不会补全;而小组内用的tolist fis插件,是通过nodejs结合ejs模板引擎生成批量静态页面,这个过程fis先对模板的其它不变的静态资源补全路径(这时候img的src还是个变量),然后再生成html,所以也是无法补全的。
解决方案:
1、经过模板渲染的图片放在data下,不加md5后缀;
2、然后在数据传入模板之前,先用__CDNPATH来补全img的路径,再传入模板渲染即可

10、'git' 不是内部或外部命令,也不是可运行的程序

这个报错可能在一开始使用下面两个命令时出现:

feg get fis3 //获取基于fis3的通用模板
feg get fis3-cms //获取基于fis3的cms模板

这两个命令的作用是clone 存放在git上面的项目demo。
出现这个报错的原因是,在安装git的时候,由于某种原因导致安装成功后环境变量没加入git,所以在cmd命令敲关于git的命令都是有这个报错。
解决方案自然是在环境变量加入git就行了:
我的电脑——右键属性——高级系统设置——环境变量——系统变量——找到“path”
只需要在现有的path后面加入git的路径(需要找到自己机子git的安装路径),比如:

xxxxxx;C:\Program Files (x86)\Git\bin

11、(待续...)

手机阅读请扫描下方二维码:

已有 61 条评论

  1. 0KeeTeam

    0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

    lffhbaoasqiixikyvxgf

  5. 0KeeTeam

    0KeeTeam

  6. 0KeeTeam

    0KeeTeam

  7. 0KeeTeam%0d%0aCRLF-Header:CRLF-Value

    0KeeTeam

  8. huanghuayu01

    mac 无法install feg是怎么回事 ali-46.gif

  9. test

    test

  10. test

    test

  11. test

    '+(44523*44429)+'

  12. test

  13. test

    test

  14. test

    test

  15. test

    %{42532*40185}

  16. test

    test
    CRLF-Header:CRLF-Value

  17. test

  18. test

    test

  19. test

    test

  20. test

    test%0d%0aCRLF-Header:CRLF-Value

  21. test

    qbckwxlywwcljuscmrbe

  22. test

    test

  23. test

    test

  24. test

    test

  25. test

    test

  26. test

    test

  27. test

    test

  28. pjdfmzdfgzuzwwolfyrf

    test

  29. test

    test

  30. test

    test

  31. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  32. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  33. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  34. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  35. 1

    1

  36. 1

    1

  37. 1

    1

  38. 1

    1

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

  44. 1

    1

  45. 1

    1

  46. 1

    1

  47. 1

    1

  48. 1

    1

  49. 1

    1

  50. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif