gulp gulp-sftp 上传服务器

gulpfile.js文件：

const gulp = require('gulp')
const ftp = require('gulp-sftp')

const config = {
    uploadTest: {
        remotePath: '/data/sit/testqymanage.side.vip', // 部署到服务器的路径
        host: '***.***.***.***',  // ip地址
        auth: 'Server1',
        port: 22  // 端口
    },
    publicPath: '/webApp/',   // 本地程序编译好路径
}

/**
 * 清除本地程序编译好的路径目录文件
 */
const del = require('del')
gulp.task('clean', ['upload'], function(callback) {
    console.log('## 已经成功部署到服务器上')
    console.log('## 清除原来编译的代码')
    del(['.' + config.publicPath], callback)
})


/**
 * 部署到测试环境
 */
gulp.task('upload', function(callback) {
    console.log('## 正在部署到测试服务器上')
    var dev = config.uploadTest
    gulp.src('.' + config.publicPath + '**')
        .pipe(ftp(Object.assign(dev, { callback })))
})

gulp.task('uploadTest', ['upload', 'clean'])

package.json文件：

// 声明npm指令(编译成功并上传服务器)
"scripts": {
        "up:test": "vue-cli-service build && gulp uploadTest"
    },

---

总结：

此处的upload任务和clean任务是从属关系，clean需要等到upload执行成功之后，再执行clean，但是upload是异步动作，
所以gulp(3.0版本)提供通过回调(callback)的方式通知下一个任务异步已经执行完成。

gulp.task('upload', function(callback) {    
    var dev = config.uploadTest
    gulp.src('.' + config.publicPath + '**')
        .pipe(ftp(Object.assign(dev, { callback }))) //gulp-sftp 提供提供回调方法callback，即当sftp上传成功之后，退出时执行
})

clean收到sftp的回调通知之后，开始执行任务

const del = require('del')
gulp.task('clean', ['upload'], function(callback) { // 注意这里的写法
    console.log('## 已经成功部署到服务器上')
    console.log('## 清除原来编译的代码')
    del(['.' + config.publicPath], callback)    // 删除本地编译文件（vue3.0开始，打包默认会删除本地久的文件，感觉这部可以省略了）
})

---

上面的config配置文件，没有明文写服务器的密码和账号，而是写在.ftppass文件里（.ftppass是gulp-sftp的配置文件，gulp运行时会自动去找，两者通过上述字段'auth'关联）

// 为了保证ftp账号安全，将FTP账号密码配置放在单独的文件中，并添加至版本控制系统的禁用列表中
{
    "Server1": {
        "user": "root",
        "pass": "xxxxxxx"
    }
}

---

上面是gulp3.0版本的写法，似乎4.0版本之后，写法又改了。如task方法已经不被推荐了，但是为了兼容，4.0版本还是能运行task方法。

---

额外：

image.png
image.png