vscode 之 Alibaba Cloud Toolkit 前端自动打包、部署

每次在没有jenkins自动部署的情况下都要经历、打包、将包通过ftp丢到服务器上。实在繁琐。那这里就推荐一个vscode插件一键打包，一键部署。Alibaba Cloud Toolkit

介绍

前端持续化集成-一键部署：在一键部署中有很多插件和工具：比如前面说的jenkins、deploy等等，这里使用阿里开发的一款插件Alibaba Cloud Toolkit
阿里云官网：产品分类>开发运维

Alibaba Cloud Toolkit传送门
vscode安装步骤

安装与部署

一.vscode 插件搜索 Alibaba Cloud Toolkit 安装

二、新建连接服务器Host View

1、 单击ALIBABA CLOUD VIEW 中的Host View

2、单击Host Add 新增最新的连接

3、输入需要的信息
Host List：需要连接的服务器地址IP
port：一般是默认22（看自己的设置）
SSH Profile：创建新的服务账号密码、或使用已经有的自己新建过的，右边选择即可

切换advance面板输入tag

三、配置打包、部署
1、点击RUN CONFIGURATIONS 右边的三个小点，并选中Deploy to Host

2、配置打包、部署

Name：配置定义一个名字，以便更容易区分多个配置；
File：选择打包方式；
Project：选择待部署工程的根目录；
Build Output：打包之后的 Output 目录；
Scripts：打包的命令，这个在你选择了工程目录，会自动读取package.json 中脚本命令；
Target Host：部署的远程目标服务器；
Target Directory：远程目标服务器上的指定部署目录；
After deploy：文件上传到服务器上之后要做的事、比如执行复制、删除等

3、配置完成
这里点击你配置的名称右键有编辑删除或者启动打包部署

四、Output 部署问题
其实进行到第三步骤是已经能进行打包并部署到远程服务器了，但是呢。这里会直接部署你的Output文件夹，比如你打包输出dist文件夹之后，这里会直接将dist整个丢到你的目标文件夹。而我们想要的是dist 中的文件。

问了阿里那边的开发，并没有什么好办、只能在After-deploy使用命令提取dist 文件夹。并删除dist
1、点击select command

2、点击Add command增加复制、删除命令

因为static中的js是做了去缓存处理（加了版本号和时间戳）、如果复制的时候不删除static，会造成static 越来越大.越来越多、所以这里要加先删除static 的命令、然后static 删除之后再去复制、复制成功后，再去删除dist文件夹

输入命令：
删除static

rm -f -r Target Directory/static

复制dist ：

cp -f -r Target Directory/dist/* Target Directory

删除dist

rm -f -r Target Directory/dist

其中Target Directory为你的服务目标地址
其中-f 表示强制覆盖、-r表示递归复制，因为dist文件夹下有多级文件夹。

合并上诉命令
;隔开：多个命令使用;拼接。异步的，各执行各的

&&隔开：同步的，只有前面命令成功执行了，才会执行后续的命令
||隔开：只有前面的命令失败了才会执行下面的命令，知道有命令成功

所以这里应该是用&&进行合并，都是依赖关系，只有删除了static 才能复制，只有复制完了dist、才能删除dist

五、部署
点击Run 部署。可以看到部署成功

服务器上也成功了，并删除了dist、而且static 也最新的，不存在叠加

导出配置

其他设配需要同一个-配置，无需再次配置，只需要导出配置，并导入即可
1、点击设置图标

2、import&export 标签

选中你需要导出的配置，默认全选，然后Export即可。
其他设备Import导出配置即可

千里之行
始于足下