如何利用 jsdelivr 免費 CDN，通過腳本實現自動上傳並替換本地圖片路徑

1
import { promises as fs } from "fs";
2
import path from "path";
3
import sharp from "sharp";
4
import fse from "fs-extra";
5
import { globby } from "globby";
6

7
const imagesDir = "/project/myproject/public/images";
8
const targetDir = "/project/resources/images";
9

10
async function compressAndCopyImages(srcDir, destDir) {
11
  try {
12
    const sourDir = `${srcDir}/**/*.{jpg,jpeg,png,gif}`;
13
    await fse.ensureDir(destDir);
14
    const entries = await globby([sourDir], { onlyFiles: false });
15

16
    for (const entry of entries) {
17
      const relativePath = path.relative(srcDir, entry);
18
      const destPath = path.join(destDir, relativePath);
19

20
      if ((await fs.stat(entry)).isDirectory()) {
21
        await fse.ensureDir(destPath);
22
      } else {
23
        const metadata = await sharp(entry).metadata();
24

25
        let options = {};
26
        let formatOptions = {};
27

28
        switch (metadata.format) {
29
          case "gif":
30
            options = { animated: true, limitInputPixels: false };
31
            formatOptions = { colours: 128 };
32
            break;
33
          default:
34
            formatOptions = { quality: 75 };
35
        }
36

37
        if (metadata.size < 10000) {
38
          await fse.copy(entry, destPath);
39
          console.log(`Copied ${relativePath} without compression`);
40
        } else {
41
          const dirPath = path.dirname(destPath);
42
          await fse.ensureDir(dirPath);
43
          await sharp(entry)?.[metadata.format](formatOptions).toFile(destPath);
44
          console.log(`Compressed and copied ${relativePath}`);
45
        }
46
      }
47
    }
48
  } catch (error) {
49
    console.error("Error during image compression and copy:", error);
50
  }
51
}

1
import simpleGit from "simple-git";
2

3
const gitRepoDir = "/project/resources";
4

5
async function gitOperations() {
6
  try {
7
    const git = simpleGit(gitRepoDir);
8
    await git.add("./*");
9
    await git.commit("Update images");
10
    await git.push("origin", "main");
11
    console.log("Pushed changes to GitHub");
12
  } catch (error) {
13
    console.error("Error during Git operations:", error);
14
  }
15
}

1
import { globby } from "globby";
2
import { replaceInFile } from "replace-in-file";
3

4
// 需要更換圖片路徑的目錄和文件
5
const contentDir = "/project/myproject/src/content/**/*.{html,js,jsx,ts,tsx}";
6
const cdnBaseUrl =
7
  "https://cdn.jsdelivr.net/gh/[GitHub 用戶名]/resources/images";
8

9
async function updateImagePaths() {
10
  try {
11
    const files = await globby([contentDir]);
12

13
    const replaceOptions = {
14
      files,
15
      from: /(["'])\/images\/(.+\.(jpg|jpeg|png|gif))/g,
16
      to: `$1${cdnBaseUrl}/$2`,
17
    };
18

19
    const results = await replaceInFile(replaceOptions);
20
    console.log(
21
      "Modified files:",
22
      results
23
        .filter((result) => result.hasChanged)
24
        .map((result) => result.file),
25
    );
26
  } catch (error) {
27
    console.error("Error during updating image paths:", error);
28
  }
29
}

1
(async function main() {
2
  await compressAndCopyImages(imagesDir, targetDir);
3
  await gitOperations();
4
  await updateImagePaths();
5
})();