一、背景
最近在多个项目上线部署过程中，发现每一次打包到测试环境或者开发环境中，都需要手动打包后再把代码拷贝到远程服务文件中，偶尔出现放错地方，被测试叼死了。最近在摸鱼过程中，利用了gulp来代替我手贱的行为，简易实现打包部署一步到位，真香。。。
二、实现思路
我们在vue项目构建完成后会在项目根目录生成一个dist目录，只需要将该目录下的文件上传到服务器的web容器即可访问。我们要做的就是通过命令行将dist目录下所有文件上传到服务器对应的目录下。
三、实现步骤
1、安装gulp和gulp-sftp
npm i gulp gulp-sftp –save-dev
2、在项目根目录新建gulp配置文件 gulpfile.js
const gulp = require(‘gulp’)
const sftp = require(‘gulp-sftp’)
gulp.task(‘test’, function () {
return gulp.src(‘dist’ + ‘/**’)
.pipe(sftp({
host: ‘IP’,
user: ‘用户名’,
pass: ‘密码’,
port: ‘端口’,
remotePath: `服务器对应存放web的目录`
}))
})
主要是通过gulp去创建这个任务名test，然后通过gulp-sftp连接后转化为流上传到指定目录，代码中的test，是可以自定义的，用于gulp区分任务的名称，也可以同时配置多个任务。
3、优化
如果我们直接把服务器的账号和密码直接写在代码中，很容易濑野的哦！所以我们可以创建“gulp-sftp配置文件.ftpPass“`，为了保证ftp账号安全，将FTP账号密码配置放在单独的文件中，禁用掉在版本控制中使用。
4、配置打包命令
对于gulp配置已经完成了，接下来就是打包后上传的操作了，我们可以在package.json文件中增加
“scripts”: {
“build”: “vue-cli-service build && gulp test”,
“gulp”: “gulp test”
},
如果你想打包后自动上传，直接把命令写在至此我们可以使用gulp来执行定义的上传任务了”build”: “vue-cli-service build && gulp test”就可以了。