前端项目build完之后自动发布到FTP服务器上

以vue-cli的项目为例，很多时候我们改一个BUG之后在本地可能没法直接调试，需要发布到服务器上才能测试，那么问题就来，改一次build一次，再打开FTP工具，然后发布。总觉得很麻烦有没有=_=。 于是乎作为一个会nodejs的前端er来说，懵生了一个想法，我所用的FTP工具（WinSCP）是不是可以一条命令来搞定？答案是可以的！

搜了一下，WinSCP的命令是这么写的：

# Windows PowerShell
PS D:\Softwares\WinSCP>winscp.exe /console /command "option batch continue" "option confirm off" "open sftp://user:pwd[@ip](/user/ip):port" "option transfer binary" "put D:\需要上传的文件路径 /服务器文件存放目录/" "exit" /log=log_file.txt

参数说明：

那么，我们最终需要实现的目标是这样一条命令自动build跟发布：

# Windows PowerShell
PS D:\我的项目>npm run build:ftp

首先，需要准备以下条件：

1. windows系统
2. WinSCP(ftp传输工具，需自行下载安装)
3. nodejs(估计大家都有)

接下来在项目根目录创建一个名为ftp.js的文件，然后写一些配置变量

// ftp.js

const { exec } = require('child_process') // nodejs子进程模块，用于创建一个cmd进程并执行命令行

// 普通密码写法
let cmd = 'D:\\Softwares\\WinSCP\\winscp.exe /console /command "option batch continue" "open sftp://用户名:密码@服务器地址" "put D:\\Softwares\\我的项目\\dist\\* /opt/我的项目/" exit /log=D:\\我的项目.log'

/* 
// 私钥文件写法
let cmd = 'D:\\Softwares\\WinSCP\\winscp.exe /console /command "option batch continue" "open sftp://用户名@服务器地址 -hostkey=""ssh-ed25510 256 sHulrcvtHG+wDY3PaeQN8TyI8qwu35VRP4Y2XXsq+m1="" -privatekey=""D:\\xxx.ppk" "put D:\\Softwares\\我的项目\\dist\\* /opt/我的项目/" exit /log=D:\\我的项目.log'
*/

关于hostkey在哪里获取，可以在WinSCP软件的服务器列表那里，右键服务器 - 生成会话URL/代码 - 脚本 里面找到

接下来是用nodejs执行cmd这条命令

// ftp.js
exec(cmd, function (error) {
  if (error) {
    console.error('error: ' + error)
    return
  }
  console.log('FTP发布完成！详情请看日志：' + 'D:\\我的项目.log')
})

然后在根目录下的package.json文件添加一条配置

...
"scripts": {
  "build:ftp": "你自己项目对应的build命令 && node ftp.js"
}
...

最终ftp.js文件是这样的

// ftp.js

const { exec } = require('child_process') // nodejs子进程模块，用于创建一个cmd进程并执行命令行

// 普通密码写法
let cmd = 'D:\\Softwares\\WinSCP\\winscp.exe /console /command "option batch continue" "open sftp://用户名:密码@服务器地址" "put D:\\Softwares\\我的项目\\dist\\* /opt/我的项目/" exit /log=D:\\我的项目.log'

/* 
// 私钥文件写法
let cmd = 'D:\\Softwares\\WinSCP\\winscp.exe /console /command "option batch continue" "open sftp://用户名@服务器地址 -hostkey=""ssh-ed25510 256 sHulrcvtHG+wDY3PaeQN8TyI8qwu35VRP4Y2XXsq+m1="" -privatekey=""D:\\xxx.ppk" "put D:\\Softwares\\我的项目\\dist\\* /opt/我的项目/" exit /log=D:\\我的项目.log'
*/

exec(cmd, function (error) {
  if (error) {
    console.error('error: ' + error)
    return
  }
  console.log('FTP发布完成！详情请看日志：' + 'D:\\我的项目.log')
})

然后就可以愉快的自动发布了

# Windows PowerShell
PS D:\我的项目>npm run build:ftp

Tips: 由于每个人的软件安装和系统环境不同， 所以这个ftp.js的文件最好是加入.gitignore里面，也避免代码开源上传到GitHub导致的服务器账号泄露