乐趣区

关于web:使用gulp上传打包文件到服务器

我的项目是应用 create-app-rewired 生成的 react 我的项目,应用 gulp 主动上传打包文件到服务器,倡议只在测试环境和模仿环境应用。

1. 装置 gulp,gulp-ssh 包

2. 编写脚本

3. 批改 config-overrides.js,将打包文件分环境生成

4. 编写 gulp 配置文件 gulpfile.js

const {src, task, series} = require("gulp");
const GulpSSH = require("gulp-ssh");
const {APP_ENV} = process.env;// 获取零碎环境
const LOCAL_PATH = `./build/${APP_ENV}/**/*`;// 本地目录

let remotePath = "/home/web/project";// 近程服务器目录
let config = {
    test: [
        {
            remotePath,
            deleteCommand: `rm -rf ${remotePath}/*`,
            ssh: {
                host: "*.*.*.*",// 测试站
                port: 22,
                username: '***',
                password: "***",
            }
        }
    ],
     mock: [
         {
             remotePath,
             deleteCommand: `rm -rf ${remotePath}/*`,
             ssh: {
                 host: "*.*.*.*",// 模仿站
                 port: 22,
                 username: '***',
                 password: "***",
             }
         },
     ]
}

task("deploy", cb => {let sshConfigs = config[APP_ENV] || [];// 配置
    let seriesArray = [];// 工作队列
    for (let i = 0; i < sshConfigs.length; i++) {const { remotePath, deleteCommand, ssh} = sshConfigs[i] || {};
        let gulpSSH = new GulpSSH({
            ignoreErrors: false,
            sshConfig: ssh
        });
        seriesArray.push(series(function step1() {console.log(` 开始革除指标服务器文件,ip:${ssh.host}, 命令:${deleteCommand}`);
            return gulpSSH.shell(deleteCommand);
        }, function step2() {console.log(` 开始上传文件到指标服务器, 源目录:${LOCAL_PATH}, 目标目录:${remotePath}`);
            return src(LOCAL_PATH).pipe(gulpSSH.dest(remotePath));
        }));
    }
    series(seriesArray)();
    cb();})

5. 执行脚本 yarn deploy:test 即可

退出移动版