VS Code使用sftp插件实现上传打包文件

前言

对于小型公司，使用jenkins实现工作流就有点厚重了，尤其是内网测试的时候更显得厚重，所以很多公司依然在用FTP上传文件的方式。

网上流行的FTP自动化流，通常是使用node脚本：

• 优势：可以自由配置，定制化程度高，可以根据打包命令来决定上传到哪个服务器，真正的一键完成。
• 缺点：配置起来麻烦。

VS Code插件方案：

• 优势：配置起来简单。
• 缺点：因为不是自己写的脚本，所以可能不那么放心，如果开自动同步的话，你不晓得是否真的同步了以及是否同步完成了，如果改成手动同步，又不如node脚本一键完成那么方便。

所以你可以根据需要，自行选择使用哪个方案，下面我介绍一下VS Code插件方案。

原理

配置一个文件，让插件自动将项目的dist文件夹传到服务器。

安装

从扩展中搜索sftp，安装即可。

配置

Windows/Linux用Ctrl+Shift+P，Mac用Cmd+Shift+P打开命令面板，输入SFTP: config即可打开配置文件，只要修改任意字符，就会在工程根目录自动存入.vscode/sftp.json文件。默认是这样：

{
    "name": "My Server",
    "host": "localhost",
    "protocol": "sftp",
    "port": 22,
    "username": "username",
    "remotePath": "/",
    "uploadOnSave": true
}

大部分配置说明见：
https://github.com/liximomo/vscode-sftp/wiki/config
为什么说是“大部分”呢，因为有些配置项只出现在了：
https://marketplace.visualstudio.com/items?itemName=liximomo.sftp
比如profiles。

我只说几个值得一说的：

路径的写法

本地路径省略最前的斜杠，比如"context": "dist",，远程路径不能省略最前的斜杠。

syncOption

• delete：服务器文件夹如果有这次上传文件之外的文件，是否删除它们。通常应为false
• skipCreate：服务器没有的文件和文件夹是否跳过创建，显然应该创建，因此设为false
• ignoreExisting：跳过升级服务器已有的文件，显然也应该是false
• update：它意思是，是否只当dist文件夹的某文件有更新，才上传到服务器。应当设为true，可以节省一些流量和时间。

watcher

• files：需要监听的文件，因为要监听dist文件夹的所有文件，所以可设为**/*.*。另外，"uploadOnSave"一定要设为false
• autoUpload：当然true
• autoDelete：当然false

实例

根据官方说明，我配置成了这个样子：

[{
  "name": "213服务器",
  "context": "dist",
  "host": "39.101...（隐去）",
  "protocol": "sftp",
  "port": 8213,
  "username": "root",
  "password": "...（隐去）",
  "remotePath": "/opt/do/item/vue/yl_dist",
  "uploadOnSave": false,
  "syncOption": {
    "delete": false,
    "skipCreate": false,
    "ignoreExisting": false,
    "update": true
  },
  "ignore": [],
  "watcher": {
    "files": "**/*.*",
    "autoUpload": true,
    "autoDelete": false
  }
}]

配置完可能需要重启VS Code才能生效。

使用

现在你有两种选择，要么自动上传，要么手动上传。

• 自动上传：就像上面的配置文件，其中保持autoUpload为true即可。别的什么都不用管。
• 手动上传：autoUpload设为false，然后打包，然后在VS Code左侧资源管理器右击dist文件夹，点击SFTP: Sync Local -> Remote即可，VS Code下方会有上传进度提示。尤其其他文件夹，点击按钮的话，会有报错提示。

高级用法：使用profiles选项配置多个远程服务器

上面说的是一个dist对应一个服务器，即便多个配置对象，也只能是选择不同的dist目录，这样实践中显然不够用，所以你可以使用profiles选项，给同一个dist配置多个服务器，比如：

[{
  "name": "213服务器",
  "context": "dist",
  "host": "隐去",
  "protocol": "sftp",
  "port": 8213,
  "username": "root",
  "password": "隐去",
  "remotePath": "/opt/do/item/vue/yl_dist",
  "uploadOnSave": false,
  "syncOption": {
    "delete": false,
    "skipCreate": false,
    "ignoreExisting": false,
    "update": true
  },
  "ignore": [],
  "watcher": {
    "files": "**/*.*",
    "autoUpload": false,
    "autoDelete": false
  },
  "profiles": {
    "wai": {
      "remotePath": "/opt/do/item/vue/yl_dist"
    },
    "appli": {
      "remotePath": "/opt/do/item/vue/yl_dist/app"
    }
  }
}]

于是乎，现在你就有了3个profiles，分别是UNSET、wai、appli。

切换profile的办法：Windows/Linux用Ctrl+Shift+P，Mac用Cmd+Shift+P打开命令面板，输入SFTP: Set Profile，然后就可以切换。

总结

1. 这个插件的文档写的太简单，需要猜。

2. 切换profile需要手动，可能经常忘记切换，从而导致上传混乱，而node脚本根据你的yarn命令就已经能自我判断。

3. 如果你的工作流足够简单，可以试试这个方案。