使用Gulp构建生产文件夹时CSS动画名称未同步问题排查

从你提供的开发/生产环境代码对比来看，核心问题是CSS动画名在生产构建阶段被压缩混淆工具重命名了：开发环境里的fadeButtons被替换成了生产环境的短标识符a，这是构建工具（比如Vite、Webpack配套的cssnano、Terser等）默认开启的体积优化手段——它会把长命名的动画、类名、CSS变量替换成极短的字符来减小文件体积，但这就导致了你看到的开发与生产环境动画名不一致的情况。

下面是针对性的解决办法：

1. 配置压缩工具，保留指定动画名 #

大多数CSS压缩工具都支持配置规则，让它跳过特定动画名的重命名：

• 如果使用cssnano（Vite、Webpack等工具默认集成），可以在PostCSS配置文件中添加如下规则：

  // postcss.config.js
  module.exports = {
    plugins: {
      cssnano: {
        preset: ['default', {
          reduceIdents: {
            // 关闭动画名的重命名
            keyframes: false
          },
          // 可选：如果还有其他未使用样式被误删，也可以关闭该选项
          discardUnused: false
        }]
      }
    }
  }
  

• 如果是Vite项目，也可以直接在vite.config.js中配置：

  import { defineConfig } from 'vite'
  
  export default defineConfig({
    css: {
      postcss: {
        plugins: {
          cssnano: {
            preset: ['default', { reduceIdents: { keyframes: false } }]
          }
        }
      }
    }
  })
  

2. 使用特殊注释标记需要保留的动画名 #

如果你不想全局关闭动画名压缩，可以给特定的@keyframes添加感叹号注释，告诉压缩工具不要处理这个动画：

/*! 禁止压缩此动画名 */
@-webkit-keyframes fadeButtons { 
  from { opacity: 0; } 
  to { opacity: 1; } 
} 
/*! 禁止压缩此动画名 */
@keyframes fadeButtons { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}

大多数主流压缩工具会识别这种/*! ... */格式的注释，跳过对后续动画名的重命名。

3. 检查是否有JS代码依赖该动画名 #

如果你的项目中有JS代码直接操作这个动画名（比如element.style.animationName = 'fadeButtons'），除了保留CSS中的动画名，还要确保JS代码里的命名和生产环境一致——要么通过上述方法保留fadeButtons，要么让JS也同步使用压缩后的短名（不过后者维护性差，更推荐前者）。

内容的提问来源于stack exchange，提问作者demond611