前端项目自动化部署

使用gulp+gulp-ssh实现项目自动化部署

1.使用npm安装gulp+gulp-ssh

npm i gulp gulp-ssh

2.在根目录创建gulpfile.js文件

const gulp = require('gulp')
const GulpSSH = require('gulp-ssh')

// eslint-disable-next-line @typescript-eslint/camelcase
const APP_ENV = process.env.NODE_ENV;
const isProduct = APP_ENV === 'production';
const outputDir = APP_ENV == 'production' ? 'dist' : APP_ENV == 'uat' ? 'test' : 'dev' //构建打包目录
// 需要上传到服务器的路径
// eslint-disable-next-line @typescript-eslint/camelcase
const remotePath = APP_ENV == "production" ? '' : `/home/blind_box_admin/`
const config = {
    ssh: { // 配置服务器地址
        host: isProduct ? '' : '服务器地址',
        port: isProduct ? 22 : 22,
        username: 'root',
        password: isProduct ? '' : '替换服务器密码',
    },
    remotePath,
    commands: [
        // 删除现有文件
        `rm -rf ${remotePath}`,
    ],
}
const gulpSSH = new GulpSSH({
    ignoreErrors: false,
    sshConfig: config.ssh,
})
/**
 * 上传前先删除服务器上现有文件...
 */
gulp.task('execSSH', () => {
    console.log('删除服务器上现有文件...')
    return gulpSSH.shell(config.commands, {
            filePath: 'commands.log'
        })
        .pipe(gulp.dest('logs'))
})
/**
 * 上传文件到服务器
 */

gulp.task('deploy', gulp.series('execSSH', done => {
    console.log('2s后开始上传文件到服务器...')
    setTimeout(() => {
        // eslint-disable-next-line @typescript-eslint/camelcase
        //这里可以将`./test/**`改成变量根据不同环境上传到不同服务器
        gulp.src(`./test/**`)
            .pipe(gulpSSH.dest(config.remotePath))
        console.log('上传完毕.....')
        done();
    }, 2000)
}))

3.配置package.json命令
增加打包命令

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "dev": "vue-cli-service build --mode dev",
    "deploy:test": "npm run test && gulp deploy"
  },