關於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/' //程序編譯好路徑
}

僅僅是結尾多了一個“/”，這樣就可以成功了，是不是很神奇！

 

如果本文對你有幫助，點個贊👍總是可以吧！