打包生成的html文件随机复制N份

需求

  • Vue项目,打包后会生成一个dist/目录

  • 将该目录下的index.html复制N份,文件名为8位随机字符串.html

思路

  • 首先需要生成复制后的文件名列表,这里通过js生成随机字符串,将其保存在一个文件distFiles.txt

  • 编写一个批处理文件distCopy.bat,读取distFiles.txt文件中的数据,复制index.html文件

实现

  • 在根目录下编写distConfig.js文件
const fs = require('fs')

// 若文件不存在,创建一个
function fileCreate(filename) {
  return new Promise((resolve, reject) => {
    fs.exists(filename, function(exists) {
      if(!exists) {
        fs.writeFile(filename, '', function(err) {
          if(err) {
            // console.log(err)
            reject(new Error('file create failed'))
          }
          resolve()
        })
      } else {
        resolve()
      }
    })
  })
}

// 增量更新随机文件名
function fileWrite() {
  const filename = 'distFiles.txt'
  const str = randomString(8) + '.html'
  return new Promise((resolve, reject) => {
    // 先读取文件内容
    fileCreate(filename).then(() => {
      fs.readFile(filename, 'utf8', (err, data) => {
        if (err) {
          reject(err)
        }
        data += str + '\r\n'
        content = data
        // 追加随机文件名
        fs.writeFile(filename, content, (err) => {
          if (err) {
            reject(err)
          }
          resolve()
        })
      })
    }).catch((err) => {
      reject(err)
    })
  })
}
// 生成随机字符串
function randomString(len) {
  len = len || 32
  // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = $chars.length
  var pwd = ''
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}
// 生成随机文件名并写入文件
async function dataCreate(sum) {
  for (let i = 0; i < sum; i++) {
    await fileWrite()
  }
}

dataCreate(50)
  • 运行node ./distConfig.js,会在根目录下生成distFiles.txt文件。改文件里面每行都是一个随机字符串命名的html文件

  • 在根目录下编写distCopy.bat文件

@echo off
:: setlocal ENABLEDELAYEDEXPANSION

:: for /l %%i in (1,1,20) do (
::   copy /y %cd%\dist\index.html %cd%\dist\shoe%%i.html
:: )

for /f "delims=" %%a in (%cd%\distFiles.txt) do (
  copy /y %cd%\dist\index.html %cd%\dist\%%a
)

:: dir %cd%\dist\*.html /b > %cd%\distHtmls.txt

pause
  • 每次Vue项目打包后,双击运行distCopy.bat即可在dist/目录下复制出50html文件

备注:

  • distConfig.jsdistFiles.txtdistCopy.bat文件不能放在dist/目录下,因为Vue项目每次打包都会先删除dist/目录

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: