快捷導(dǎo)航

js使用oclif開發(fā)命令行工具實現(xiàn)批量修改文件名

更新時間：2023年12月12日 08:49:12 作者：雙羽

前端開發(fā)工作中常用的很多CLI命令相信大家已經(jīng)很熟悉了,很方便很實用,能夠快速幫助你創(chuàng)建項目,快速執(zhí)行某些重復(fù)性操作,下面我們就來學(xué)習(xí)一下如何使用CLI命令批量修改文件名吧

前言

前端開發(fā)工作中常用的很多 CLI 命令相信大家已經(jīng)很熟悉了，很方便很實用，能夠快速幫助你創(chuàng)建項目，快速執(zhí)行某些重復(fù)性操作。

oclif

我們 github.com/oclif/oclif 庫來作為 CLI 的基礎(chǔ)框架，這個官方文檔寫的很詳細(xì)，我們這里簡單的擴(kuò)展說一下，并且實踐一個 demo。

設(shè)計一個批量修改文件名的小工具

我們設(shè)計一個批量更改文件名字的小工具，它可以幫助我們將某個目錄的下所有文件，按照自定義的規(guī)則來進(jìn)行批量重命名，這個工具

設(shè)計我們的命令用法

我們希望這樣使用命令即可批量重命名目錄下的所有文件。

./cl rename ./test  -R -N test_{{index}}_{{time}}_{{st}}

其中 ./cl 是 ln -s /bin/dev

我們想設(shè)計的參數(shù)

{{name}} 代表原始文件名
{{index}} 代表遞歸指數(shù)：1,2,3,4
{{time}} 代表時間：2022-8-23_11-39
{{st}} 代表時間戳：1661226082464
-R 代表是否開啟目錄深層遞歸
-N XXXX 批量重命名后的名字格式

列如我們可以這樣用：

./cl rename ./test  -R -N test_{{index}}_{{time}}_{{st}} 

正在執(zhí)行批量重命名命令，參數(shù)：{ path: './test' }，{ deep: true, name: 'test_{{index}}_{{time}}_{{st}}' }
讀取目錄: ./test
讀取目錄: test/sub
讀取目錄: test/sub/commands
讀取目錄: test/sub/commands/hello
重命名文件: test/sub/commands/hello/test_4_2022-8-18_19-47_1661225596495.ts --> test_0_2022-8-18_19-47_1661225679878.ts
重命名文件: test/sub/commands/hello/test_5_2022-8-18_19-47_1661225596495.js --> test_1_2022-8-18_19-47_1661225679879.js
重命名文件: test/sub/commands/hello/test_6_2022-8-18_19-47_1661225596496.ts --> test_2_2022-8-18_19-47_1661225679879.ts
重命名文件: test/sub/commands/hello/test_7_2022-8-18_19-47_1661225596496.js --> test_3_2022-8-18_19-47_1661225679879.js
重命名文件: test/sub/commands/hello/test_8_2022-8-18_19-47_1661225596496.ts --> test_4_2022-8-18_19-47_1661225679879.ts
重命名文件: test/sub/commands/hello/test_9_2022-8-18_19-47_1661225596496.js --> test_5_2022-8-18_19-47_1661225679879.js
讀取目錄: test/sub/commands/setup
重命名文件: test/sub/commands/setup/index.d.ts --> test_6_2022-8-18_19-47_1661225679879.ts
重命名文件: test/sub/commands/setup/index.js --> test_7_2022-8-18_19-47_1661225679879.js
重命名文件: test/sub/index.d.ts --> test_8_2022-8-18_19-47_1661225679879.ts
重命名文件: test/sub/index.js --> test_9_2022-8-18_19-47_1661225679880.js
重命名文件: test/sub/test_3_2022-8-23_10-52_1661225596495 --> test_10_2022-8-23_10-52_1661225679880
重命名文件: test/test_0_2022-8-23_10-52_1661225596494 --> test_11_2022-8-23_10-52_1661225679880
重命名文件: test/test_1_2022-8-16_18-1_1661225596495.png --> test_12_2022-8-16_18-1_1661225679880.png
重命名文件: test/test_2_2022-7-18_14-32_1661225596495.json --> test_13_2022-7-18_14-32_1661225679880.json
重命名文件: test/圖片2.jpg --> test_15_2022-6-24_15-12_1661225679880.jpg
重命名文件: test/矩陣點(diǎn)背景圖 2.png --> test_17_2022-8-12_17-23_1661225679881.png
重命名文件: test/矩陣點(diǎn)背景圖.png --> test_18_2022-8-12_17-23_1661225679881.png

自動的遞歸所有文件，并且全部以某個格式進(jìn)行命名

源碼實現(xiàn)

目錄結(jié)構(gòu)

首先跟隨官方文檔所說的那樣，安裝并生成 Hello world 程序，再進(jìn)行我們自定義命令的編寫。接下來我們新建一個命令。

src/commands/rename/index.ts
在 rename 目錄下新建 index.ts 之后，框架會為我們自動注冊 rename 命令。

代碼中我寫了注釋，通過配合代碼閱讀相信會更有用。

import { Command, Flags, CliUx } from "@oclif/core";
import * as fs from "fs-extra";
import * as path from "path";

// 執(zhí)行命令：
// ./cl rename ./test  -R -N test_{{index}}_{{time}}_{{st}}
export class Rename extends Command {
  static description = "description of this example command";

  // 注冊標(biāo)識參數(shù)：--name 和 --deep，并且設(shè)置簡稱
  static flags = {
    name: Flags.string({ char: "N" }),
    deep: Flags.boolean({ char: "R" }),
  };

  // 注冊參數(shù)，即 rename 空格后的第一段文字，這里是 ./test
  static args = [{ name: "path" }];

  private index = 0;

  // 命令解析完畢后，執(zhí)行此方法
  async run() {
    const { args } = await this.parse(Rename);
    const { flags } = await this.parse(Rename);

    this.log("正在執(zhí)行批量重命名命令，參數(shù)：%s，%s", args, flags);

    // 遍歷目錄并給每一個文件執(zhí)行規(guī)則程序
    this.wake(args.path, flags.deep, (path: string) => {
      this.rule(path, flags.name);
    });
  }

  // 遞歸遍歷目錄
  wake(root: string, recursive = false, callback = (path: string) => {}): void {
    console.log("讀取目錄:", root);
    for (const filename of fs.readdirSync(root)) {
      const absPath = path.normalize(path.join(root, filename));
      const file = fs.statSync(absPath);
      if (file.isDirectory() && recursive) {
        this.wake(absPath, recursive, callback);
        continue;
      }
      try {
        callback(absPath);
      } catch (error) {
        console.log(error);
      }
    }
  }

  // 文件名規(guī)則注冊
  rule(filePath: string, nameRules?: string) {
    const fileName = path.basename(filePath);

    // 規(guī)則程序執(zhí)行，替換關(guān)鍵字
    // 目前只做這么幾個規(guī)則，以后看情況加，擴(kuò)展性也不錯，可以單獨(dú)分到 services 層做一層分離，可讀性更高
    // 這里注冊了 {{index}} {{time}} 等關(guān)鍵字
    let newFileName = this.keyword(
      String(nameRules),
      "index",
      () => this.index++
    );
    newFileName = this.keyword(newFileName, "name", () => fileName);
    newFileName = this.keyword(newFileName, "st", () => new Date().getTime());
    newFileName = this.keyword(newFileName, "time", () => {
      const date = new Date(fs.statSync(filePath).mtime);
      return `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}_${date.getHours()}-${date.getMinutes()}`;
    });

    newFileName += path.extname(filePath);
    const absNewPath = path.normalize(
      path.join(path.dirname(filePath), newFileName)
    );

    this.log(`重命名文件: ${filePath} --> ${newFileName}`);
    fs.renameSync(filePath, absNewPath);
  }

  // 文件名關(guān)鍵字替換
  keyword(
    fileName: string,
    rule: string,
    variableFn: () => string | number
  ): string {
    const key = "{{" + rule + "}}";
    const variable = variableFn();
    while (fileName.includes(key)) {
      fileName = fileName.replace(key, String(variable));
    }
    return fileName;
  }
}

執(zhí)行命令之后的結(jié)果都在上面的【命令用法】章節(jié)了，可以返回到上面看看輸出。