分享我的发现、想法与心得

0%

前端开发手札fis篇——关于部署目录的问题

用了差不多一年多的fis,感觉他比其他构建工具更容易上手,扩展插件也比较多。但是诟病也是有的,比如接下来要说的部署问题,虽然fis3本身也有比较好的方案解决(设置url参数),但是对于部署不是给内部同事对接而是给客户部署是遇到不少问题,今天刚好有时间把这个问题解决啦,顺便也纪录下来。

部署问题

由于fis3部署生成的文件路径是网站目录根开始的(如:/assets/img/bg.png),导致网站发布必须是目录根才能有效加载。实际情况可能使用http://www.uxfeel.com/lxyz/这样的目录下发布,怎样才能更好地发布呢?

解决方法1

修改fis设置,添加url参数于静态资源的构建规则中,例如:

1
2
3
4
5
6
7
8

let asset_dir = '/assets',
url = '/lxyz/'+url;

fis.match('**',{
release: asset_dir + '/$0',
url: url + '$&' //改变引用地址
})

使用url参数fis就会很好帮你把访问路径替换好,但是并不灵活。

假如你的项目交付给客户,然后他们先部署到测试服务器测试,然后再部署到其他服务器发布呢?
这是客户需要找你进行代码的发布,当然你可以给开发包让他们弄,但是也有不讲理的时候。这是怎样处理更方便呢?

解决方法2

可以使用url替换脚本repath.sh

1
2
# $ repath.sh [group] [path]
$ repath.sh lxyz ../release/lxyz-publish

repath.sh脚本,会搜着目录下的所有文件并在/assets/"/assets/('/assets/开头的路径前面添加[group]参数。

1
2
3
4
5
6
7
8

#!/bin/bash

group=$1
path=$2
sed -i "s@(/assets/@(/$group/assets/@g" `grep "/assets/" -rl $path`
sed -i "s@('/assets/@('/$group/assets/@g" `grep "/assets/" -rl $path`
sed -i "s@\"/assets/@\"/$group/assets/@g" `grep "/assets/" -rl $path`

虽然办法可能蠢一点,但是很实用😂