关于gulp-sftp上传到服务器

首先下载npm模块

npm install --save-dev gulp gulp-sftp webpack del

1. gulp-sftp 上传服务器主要依赖
2. gulp、webpack必备
3. del 是一个清空文件目录的依赖包

gulpfile.js

const gulp = require('gulp');

const webpack = require('webpack')

const path = require('path');

const del = require('del');

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

// 是webpack配置文件
const webpackConfig = require('./webpack.config');

// 是上传地址配置，可以在.gitignore中忽略此文件上传，为了安全本地拥有就可以了
const config = require('./config');

// 判断是开发环境还是生产环境
const isEnv = process.env.NODE_ENV == 'production';
/**
 * 清除生产目录文件
 */
gulp.task('clean', ['upload'], function (callback) {
    console.log('## 已经成功部署到服务器上')
    console.log('## 清除原来编译的代码')
    del(['.' + config.publicPath], callback)
});

/**
 * 编译代码
 */
gulp.task('build', function (callback) {
    console.log('## 代码编译开始')
    webpack(webpackConfig, function (err, state) {
        console.log('## 代码编译完成')
        callback(err)
    })
});

/**
 * 编译代码，自动部署到服务器
 */
gulp.task('upload', function (callback) {
    console.log('## 正在部署到服务器上')
    var dev = isEnv ? config.devDist : config.devTest
    gulp.src('.' + config.publicPath + '**')
        .pipe(ftp(Object.assign(dev, {callback})))
});

/**
 * 上传到测试服务器上
 */
gulp.task('devTest', ['build', 'upload', 'clean'])

/**
 * 上传到生产服务器上
 */
gulp.task('devDist', ['build', 'upload', 'clean'])

config.js

module.exports = {
    devTest: { //部署到测试服务器上
        remotePath: '/root/app/', //部署到服务器的路径
        host: 'xx.xxx.xxx.xx', //ip地址
        user: 'root', //帐号
        pass: "******", //密码
        port: 22 //端口
    },
    devDist: { //部署正式服务器上
        remotePath: '/root/app/', //部署到服务器的路径
        host: 'xx.xx.xxx.xxx', //ip地址
        user: 'root', //帐号
        pass: '******', //密码
        port: 22 //端口
    },
    publicPath: '/dist/' //程序编译好路径
}

有一点要注意的是你会遇到这样的错误：

[15:22:46] Starting 'upload'...
[15:22:46] Authenticating with password.
events.js:141
    throw er; // Unhandled 'error' event
      ^
Error: No such file
    at SFTP._parse (E:\web\cdn\ns\node_modules\ssh2\lib\SFTP\SFTPv3.js:1090:23)
    at ChannelStream.<anonymous> (E:\web\cdn\ns\node_modules\ssh2\lib\SFTP\SFTPv3.js:72:10)
    at emitOne (events.js:77:13)
    at ChannelStream.emit (events.js:169:7)
    at readableAddChunk (_stream_readable.js:146:16)
    at ChannelStream.Readable.push (_stream_readable.js:110:10)
    at Parser.<anonymous> (E:\web\cdn\ns\node_modules\ssh2\lib\Channel.js:102:25)
    at emitOne (events.js:77:13)
    at Parser.emit (events.js:169:7)
    at Parser.parsePacket (E:\web\cdn\ns\node_modules\ssh2\lib\Parser.js:607:12)

config.js 你可以修改为这样:

module.exports = {
    devTest: { //部署到测试服务器上
        remotePath: '/root/app/', // 仅仅是结尾多了一个”/“，部署到服务器的路径
        host: 'xx.xxx.xxx.xx', //ip地址
        user: 'root', //帐号
        pass: "******", //密码
        port: 22 //端口
    },
    devDist: { //部署正式服务器上
        remotePath: '/root/app/', // 仅仅是结尾多了一个”/“，部署到服务器的路径
        host: 'xx.xx.xxx.xxx', //ip地址
        user: 'root', //帐号
        pass: '******', //密码
        port: 22 //端口
    },
    publicPath: '/dist/' //程序编译好路径
}

仅仅是结尾多了一个“/”，这样就可以成功了，是不是很神奇！

如果本文对你有帮助，点个赞