gulp修改服务器端口,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