vue中使用gulp-sftp一个命令完成打包同时部署上线

在完成项目的更新时，每次都要npm run build，再手动上传到服务器，刚开始觉得没什么，后来改动频繁了越来越感到烦，毕竟不懒的程序员不是好程序员。决定探索一下有没有什么方法可以一个命令完成打包和部署。

后来发现了可以使用gulp-sftp这个东西来完成，真不错啊，让我突然想了解下gulp了。

顺便记录下使用方法，毕竟，也浪费了一点时间琢磨。

首先，安装

npm install gulp gulp-sftp --save

直接安装gulp-sftp可能会出现一种问题，后面会说到

这里建议直接安装gulp-sftp-up4

也就是

npm install gulp gulp-sftp-up4 --save

第二步，在项目根目录创建gulpfile.js文件：

const gulp = require('gulp') //这里是gulp4版本
const ftp = require('gulp-sftp')

const config = {
    uploadTest: {
        remotePath: '/www/wwwroot/***', // 部署到服务器的路径
        host: '***.***.***.***',  // ip地址
        auth: 'authorization',//下文有解释
		//user:'root',
		//pass:'******',
        port: 22  // 默认是22端口
    },
    publicPath: '/dist/',   // 本地程序编译好路径
}

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

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

上述config.uploadTest中没有明文使用用户名和密码，而是用auth字段，主要是为了安全考虑，我们在根目录另外创建一个.ftppass文件（.ftppass是gulp-sftp的配置文件，gulp运行时会自动去找，两者通过上述字段auth关联）

.ftppass文件：

{
    "authorization": {
        "user": "root",//默认是root
        "pass": "**********"//这个是服务器密码，如果是云服务器可以在管理控制台中设置（下图以阿里云为例）
    }
}

再到package.json中配置：

"script":{
    "pack_upload": "vue-cli-service build && gulp uploadTest"
}

最后，npm run pack_upload，完成！

也许会遇到的问题

1、file.pipe is not a function，这个问题就是刚刚上文提到的直接安装gulp-sftp会出现的问题，如果是Gulp4版本，且ftp require的是【gulp-sftp】，需要将【gulp-sftp】升级至【gulp-sftp-up4】，重新执行ftp传输任务；
还有一种解决方法就是在node_modules下的gulp-sftp的index.js中这行代码file.pipe(stream); // start upload换成：

// start upload
if ( file.isStream() ) {
    file.contents.pipe( stream );
} else if ( file.isBuffer() ) {
    stream.end( file.contents );
}

即可解决问题。

2、其他的问题比较有可能的就是在Authenticating with password.这个阶段会出现，可能直接连接失败，可能连接超时，这时就要检查是不是服务器密码错了或者端口号、ip地址错了。

其他问题可以留言交流。

在我的博客看这篇文章