关于前端部署的小工具FTP

事情是这样的，在一天工作闲来无事摸鱼的时候，让我把代码上传到服务器，于是我一如既往的打开了FileZilla就是一套先删除原来的代码，框框一顿复制粘贴，成功上传。

于是我就思考陷入了焦虑，每次都这么传太TM累了。于是我打开了百度一顿搜，终于在不屑努力下找到了一个库

basic-ftp 就是它

于是就有了下面的代码

import { Client } from "basic-ftp";
import { readdirSync, statSync } from "fs";
import picocolors from "picocolors";
const { green, blue, bold } = picocolors;

import path, { join } from "path";
// 文件上传计数
let num = 0;
const __dirname = path.resolve();
async function uploadDistToFTP() {
  const client = new Client();
  client.ftp.verbose = true;

  try {
    // 连接 FTP
    await client.access({
      host: "XXXXXX",
      port: "XXXXX",
      user: "XXXXX",
      password: "XXXXXXX"
    });

    // 切换到远程指定的文件夹   这里对应的是需要存储到的文件夹地址  没有会自动创建
    await client.ensureDir("/scm");

    // 删除目录下所有文件
    await client.clearWorkingDir();

    // 上传dist目录下所有文件和子目录
    const distPath = join(__dirname, "dist");
    await uploadDirectory(client, distPath);

    console.log(bold(green(`🎉上传成功`)));
  } catch (err) {
    console.error("FTP 上传错误:", err);
  }

  client.close();
}

async function uploadDirectory(client, dirPath) {
  const files = readdirSync(dirPath);
  for (const file of files) {
    const fullPath = join(dirPath, file);
    const stats = statSync(fullPath);
    if (stats.isFile()) {
      num++;
      // 如果是文件，则上传
      console.log(`正在上传文件: 第${num}个文件`);

      await client.uploadFrom(fullPath, file);
    } else if (stats.isDirectory()) {
      // // 如果是目录，则递归上传
      await client.ensureDir(file); // 创建远程目录
      await uploadDirectory(client, fullPath); // 递归调用
      await client.cd(".."); // 回到上一级目录
    }
  }
}

// 调用上传函数
uploadDistToFTP();

因为当前的项目是Vue3 + TS,所以上传的是dist下的所有文件.

使用方法也非常的简单。只需要加一条命令即可

pnpm run build && node 对应文件地址

接下来的时间就可以端杯咖啡静静的等待。 真是美好滴一天~~