插件窝 干货文章 如何用正则表达式高效替换文件名并最小化.js和.css文件?

如何用正则表达式高效替换文件名并最小化.js和.css文件?

替换 replace const javascript 295    来源:    2025-03-25

高效替换文件名并最小化.js和.css文件的正则表达式方案

文件名替换方案

基本替换模式

// 替换文件名中的特定模式
const newName = oldName.replace(/pattern/g, 'replacement');

常见用例

  1. 替换前缀/后缀:

    // 将"old_"前缀替换为"new_"
    filename.replace(/^old_/, 'new_');
    
  2. 替换特定字符:

    // 将空格替换为下划线
    filename.replace(/\s+/g, '_');
    
  3. 批量重命名数字序列:

    // 将file1, file2等重命名为document1, document2
    filename.replace(/^file(\d+)/, 'document$1');
    

最小化JS/CSS文件

使用正则表达式进行基本最小化

const minified = code
  .replace(/\/\/.*$/gm, '')       // 删除单行注释
  .replace(/\/\*[\s\S]*?\*\//g, '') // 删除多行注释
  .replace(/\s+/g, ' ')           // 压缩空白字符
  .replace(/\s*([{};,:])\s*/g, '$1') // 删除符号周围的空格
  .trim();

更全面的最小化方案

对于生产环境,建议使用专业工具如: - JS: UglifyJS, Terser, Babel-minify - CSS: cssnano, clean-css

综合解决方案(Node.js脚本示例)

const fs = require('fs');
const path = require('path');
const { minify } = require('terser'); // 用于JS
const cleanCSS = require('clean-css'); // 用于CSS

// 1. 文件名替换函数
function renameFiles(dir, pattern, replacement) {
  fs.readdirSync(dir).forEach(file => {
    const oldPath = path.join(dir, file);
    const newName = file.replace(new RegExp(pattern, 'g'), replacement);
    const newPath = path.join(dir, newName);

    if (oldPath !== newPath) {
      fs.renameSync(oldPath, newPath);
      console.log(`Renamed: ${file} → ${newName}`);
    }
  });
}

// 2. 文件最小化函数
async function minifyFiles(dir, ext) {
  fs.readdirSync(dir).forEach(async file => {
    if (path.extname(file) === ext) {
      const filePath = path.join(dir, file);
      const content = fs.readFileSync(filePath, 'utf8');

      let result;
      if (ext === '.js') {
        result = await minify(content);
      } else if (ext === '.css') {
        result = new cleanCSS().minify(content).styles;
      }

      fs.writeFileSync(filePath, result);
      console.log(`Minified: ${file}`);
    }
  });
}

// 使用示例
const targetDir = './src/assets';
renameFiles(targetDir, 'oldprefix', 'newprefix');
minifyFiles(targetDir, '.js');
minifyFiles(targetDir, '.css');

注意事项

  1. 备份文件: 在执行批量操作前务必备份文件
  2. 测试正则: 先在少量文件上测试正则表达式
  3. 性能考虑: 对于大型项目,考虑使用流式处理或分批处理
  4. 错误处理: 添加适当的错误处理逻辑
  5. 版本控制: 确保在版本控制系统下操作,以便回滚

高级技巧

  1. 使用捕获组重组文件名:

    // 将"img-123.jpg"重命名为"image_123.jpg"
    filename.replace(/(img)-(\d+)\.(jpg)/, 'image_$2.$3');
    
  2. 条件替换:

    // 仅对特定模式的文件重命名
    if (/^project_\d+/.test(filename)) {
     return filename.replace(/^project_/, 'proj_');
    }
    
  3. 结合日期时间戳:

    // 添加当前日期作为前缀
    const dateStr = new Date().toISOString().slice(0, 10);
    return `${dateStr}_${filename}`;
    

希望这些方案能帮助您高效处理文件重命名和最小化任务!