gulp 的生产文件夹构建问题

Question

我想弄清楚为什么我在 css 中添加的动画名称样式没有从我的开发环境复制到我的生产环境。

这是我的生产环境中的代码。

@keyframes a {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.site-main__home-links {
    animation: a 2s
}

这是我开发环境中的代码。

@-webkit-keyframes fadeButtons {
 from { opacity: 0; }
 to { opacity: 1; }
}

@keyframes fadeButtons {
 from { opacity: 0; }
 to { opacity: 1; }
}

.site-main__home-links {
 -webkit-animation: fadeButtons 2s;
         animation: fadeButtons 2s;
}

这是我的列表 package.json

Answer 1

因为 gulp-cssnano 所做的一些工作是将长名称减少到 space space，所以 "fadeButtons" 更改为 "a"。这是正常的并且是缩小过程的一部分 - 它被称为 "mangling" 名称。缩小后您的代码应该可以正常工作。

您必须查看 cssnano 文档以了解是否可以关闭重整名称（或某些指定的名称）。

gulp 的生产文件夹构建问题

production folder build issue with gulp

gulp

gulp-usemin