batch-handle-resource

Author: coder-hxl

README.md

@@ -2,5 +2,5 @@
 
 用于批量处理资源。
 
-- transformImage 图片转换等操作
-- replaceFileContent 文件内容
+- transformImage 批量图片转换
+- replaceFileContent 批量文件替换内容

package.json

@@ -5,7 +5,7 @@
   "main": "src/index.ts",
   "scripts": {
     "start": "tsx src/index.ts",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "tsx test/index.ts"
   },
   "keywords": [],
   "author": "CoderHXL",

src/index.ts

@@ -4,3 +4,78 @@ import sharp from 'sharp'
 import transformImage from './transformImage'
 import replaceFileContent from './replaceFileContent'
 
+const BASE_PATH = 'D:/CoderHXL/Project/spyx-next-web'
+const ENTER_PATH = BASE_PATH + '/public'
+const OUTPUT_PATH = BASE_PATH + '/public'
+const FILE_ENTER_PATH = BASE_PATH + '/src'
+const LOG_FILE_PATH = 'D:/CoderHXL/性能优化/图片优化'
+
+const errorList: { path: string; message: string }[] = []
+
+function start() {
+  async function imageFormatWebp(entryPath: string, outputPath: string) {
+    try {
+      const buffer = await sharp(entryPath).toFormat('webp').toBuffer()
+      await fs.promises.writeFile(outputPath, buffer)
+      await fs.promises.unlink(entryPath)
+
+      return buffer
+    } catch (error: any) {
+      errorList.push({ path: entryPath, message: error.message })
+    }
+  }
+
+  transformImage({
+    entry: ENTER_PATH,
+    output: OUTPUT_PATH,
+
+    mkdir: true,
+    logFileGeneratePath: LOG_FILE_PATH,
+
+    useFile: { dir: FILE_ENTER_PATH, imageInFileAlias: { [ENTER_PATH]: '' } },
+
+    rules: [
+      {
+        name: 'png',
+        format: [
+          {
+            name: 'webp',
+            handle: ({ entryPath, outputPath }) =>
+              imageFormatWebp(entryPath, outputPath)
+          }
+        ]
+      },
+      {
+        name: 'jpg',
+        format: [
+          {
+            name: 'webp',
+            handle: ({ entryPath, outputPath }) =>
+              imageFormatWebp(entryPath, outputPath)
+          }
+        ]
+      }
+    ]
+  }).then(async (pathInfoList) => {
+    if (errorList.length) {
+      console.log(`Error: list: ${errorList} - length: ${errorList.length} `)
+    }
+
+    const replaceInfo = pathInfoList.map((item) => ({
+      searchValue: item.entryPath.replace(OUTPUT_PATH, ''),
+      replaceValue: item.outputPath.replace(OUTPUT_PATH, '')
+    }))
+
+    // 更新文件内图片资源的 URL
+    await replaceFileContent({
+      entry: FILE_ENTER_PATH,
+      list: replaceInfo,
+
+      logFileGeneratePath: LOG_FILE_PATH
+    })
+
+    console.log('完成 - 图片转换以及更新路径')
+  })
+}
+
+start()

src/replaceFileContent.ts

@@ -1,35 +1,60 @@
 import fs from 'node:fs'
-import { getAllDirFileContentAndPath } from './shared'
+import { getAllDirFileContentAndPath, LogFileGenerate } from './shared'
+
+const logFileGenerate = new LogFileGenerate(
+  '文件内图片 URL 更新',
+  '# 文件内图片 URL 更新',
+  ['次数', '位置']
+)
 
 interface ReplaceFileContent {
   entry: string
-
   list: { searchValue: string; replaceValue: string }[]
+
+  logFileGeneratePath?: string
+  itemLog?: boolean
 }
 
 export default async function replaceFileContent(config: ReplaceFileContent) {
-  const { entry, list } = config
+  const { entry, list, itemLog = true, logFileGeneratePath } = config
   const startTime = Date.now()
 
-  console.log('替换任务开始')
+  console.log('替换文件内容任务开始')
 
-  const fileInfo = await getAllDirFileContentAndPath(entry)
+  const fileInfoList = await getAllDirFileContentAndPath(entry)
 
+  const replaceQueue: { path: string; content: string }[] = []
   for (const item of list) {
     const { searchValue, replaceValue } = item
 
-    for (const cItem of fileInfo) {
-      const { path, content } = cItem
+    for (const fileInfo of fileInfoList) {
+      const { content } = fileInfo
       if (!content.includes(searchValue)) continue
 
-      console.log('正在处理: ', path)
+      fileInfo.content = content.replaceAll(searchValue, replaceValue)
+
+      replaceQueue.push(fileInfo)
+    }
+  }
+
+  console.log(`文件数量: ${replaceQueue.length}`)
+
+  // 替换文件内容
+  let i = 0
+  for (const fileInfo of replaceQueue) {
+    const { path, content } = fileInfo
 
-      const newContent = content.replaceAll(searchValue, replaceValue)
+    if (itemLog) console.log('正在替换: ', path)
 
-      await fs.promises.writeFile(path, newContent)
+    if (!logFileGenerate.content.includes(path)) {
+      logFileGenerate.addRow([++i, path])
     }
+
+    await fs.promises.writeFile(path, content)
   }
 
+  logFileGenerate.generate(logFileGeneratePath)
+
   const endTime = Date.now()
-  console.log(`替换任务结束 耗时: ${(endTime - startTime) / 1000}s`)
+  console.log(`替换文件内容任务结束 耗时: ${(endTime - startTime) / 1000}s`)
 }

src/shared/file.ts

@@ -8,15 +8,15 @@ export function getFilePath(
   const transformToPaths = dirs.reduce((prev, v) => {
     if (v.isDirectory()) return prev
 
-    let path = `${v.parentPath}/${v.name}`
+    let filePath = `${v.parentPath}/${v.name}`
 
-    if (path.includes('\\')) {
-      path = `${path.replaceAll('\\', '/')}`
+    if (filePath.includes('\\')) {
+      filePath = filePath.replaceAll('\\', '/')
     }
 
-    if (filter && !filter(path)) return prev
+    if (filter && !filter(filePath)) return prev
 
-    prev.push(path)
+    prev.push(filePath)
 
     return prev
   }, [] as string[])

src/shared/index.ts

@@ -1,2 +1,3 @@
 export * from './general'
 export * from './file'
+export * from './logFileGenerate'

src/shared/logFileGenerate.ts

@@ -0,0 +1,26 @@
+import fs from 'node:fs'
+
+export class LogFileGenerate {
+  private name: string
+  content = ''
+
+  constructor(name: string, title: string, header: string[]) {
+    this.name = name
+
+    this.content += `${title}\n`
+
+    this.content += `| ${header.join(' | ')} |\n`
+    this.content += `| ${header.map((v) => '-----').join(' | ')} |\n`
+  }
+
+  addRow(row: (string | number)[]) {
+    this.content += `| ${row.join(' | ')} |\n`
+  }
+
+  async generate(path?: string) {
+    await fs.promises.writeFile(
+      `${path}/${this.name}-${Date.now()}.md`,
+      this.content
+    )
+  }
+}