前端自动化部署脚本
需要两个插件
- shelljs 这个库能够让我们在js文件中执行shell命令。shelljs做的事就是自动化,从耗时的重复性常规动作里解放出来,提升开发效率和工作心情。
- ssh2-sftp-client 一个用于node.js的SFTP客户端,一个用于SSH2的包装程序(提供高级便利抽象)以及一个基于Promise的API
- 安装
cnpm i shelljs ssh2-sftp-client --save-dev
或者
npm i shelljs ssh2-sftp-client --save-dev
- package.json 新增命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"upload": "node upload/index.js",
"lint": "vue-cli-service lint"
},
- 增加upload 文件夹 里面新建config.js和index.js文件
- config.js 代码
module.exports = {
ip: "", // ssh地址
username: "", // ssh 用户名
port: "", //端口
password: "", // ssh 密码
path: '/usr/local/nginx/html/code-nav/', // 操作开始文件夹 可以直接指向配置好的地址
rmpath: '/usr/local/nginx/html/code-nav/' // 需要删除的文件夹
}
- index.js 代码
const config = require('./config.js')
const shell = require('shelljs')
const path = require('path')
let Client = require('ssh2-sftp-client')
// 打包 npm run build
const compileDist = async () => {
if (shell.exec(`npm run build`).code == 0) {//判断是否打包完成
console.log("打包成功")
}
}
async function connectSSh () {
let sftp = new Client()
sftp.connect({
host: config.ip, // 服务器 IP
port: config.port,
username: config.username,
password: config.password
}).then(() => {
console.log("先执行删除服务器文件")
return sftp.rmdir(config.rmpath, true)
}).then(() => {
// 上传文件
console.log("开始上传")
return sftp.uploadDir(path.resolve(__dirname, '../dist'), config.path)
}).then(() => {
console.log("上传完成")
sftp.end()
}).catch((err) => {
console.log(err, '失败')
sftp.end()
})
}
async function runTask () {
await compileDist() //打包完成
await connectSSh() //提交上传
}
runTask()
- 执行脚本部署上线
npm run upload