如何不使用 Bower 和 Gulp 重复代码？

Question

我使用 Bower 来管理我的项目的前端包，并使用 Gulp 缩小并创建一个文件，其中包含包中的所有 CSS 和 JS。它将该文件保存在 assets 文件夹中，我从该文件夹中获取 html.

上的文件

现在，这是我的 bower list

├── cssfx#0.9.6
├── font-awesome#4.3.0
├── jquery#2.1.3
├─┬ jquery.cookie#1.4.1
│ └── jquery#2.1.3
├── jquery.ellipsis#0.7.1
├── normalize.css#3.0.3
└─┬ semantic-ui#1.12.0
  └── jquery#2.1.3

如您所见，我安装了 Semantic UI 和 normalize.css。问题是 Semantic UI 使用 normalize.css 作为重置，因此 normalize.css 包含在 Semantic UI 代码中。在 Gulp 生成的 css 文件中，normalize.css 被包含了两次，这是一个问题，因为：

代码重复，使文件变大
Semantic UI使用normalize.css v3.0.1，用Bower安装的normalize.css是v3.0.3

这是我第一次遇到这种情况，但假设我使用的软件包包含另一个我已经安装的软件包，情况与上述相同。所以我相信解决方案必须是对所有包都有效的东西。

有没有办法自动删除重复的代码？在我上面的例子中，从 Semantic UI 中删除 normalize.css 并使用安装的 normalize.css 包？

如果无法做到这一点，我可以删除重复代码的唯一方法是手动删除，或者有另一个包管理器，如 Bower 或类似 Gulp 的东西具有该功能？

Answer 1

有一个名为 gulp-minify-css 的 gulp 任务作为 clean-css 的包装器：https://github.com/jonathanepollack/gulp-minify-css

对于 grunt，clean-css 包装器被命名为 grunt-contrib-cssmin: https://github.com/gruntjs/grunt-contrib-cssmin

底层模块 (clean-css) 不同于简单的缩小，因为有选项可以组合属性声明并消除最终被后面的声明覆盖的声明。我还没有测试过自己，但我想它会消除 css 中的任何冗余，这些冗余是由（几乎）相同文件的双重包含引起的。

然而，这并没有真正解决问题。

在这种情况下，您应该只删除独立 normalize.css。如果它包含在 Semantic UI 之前，它将在很大程度上（如果不是完全的话）被 Semantic UI 和它自己的 normalize.css 副本覆盖。如果之后包含它，那么它可能会重置由语义 UI 定义的内容，而您也不希望这样。

一般来说，如果一个框架包含 normalize.css，则它旨在单独使用而不与其他框架一起使用。（即你不会同时使用 Foundation 5 和 Semantic UI。）

当您连接 css 时，首先包括任何全局框架（语义 UI），然后添加其他内容，例如图标包、滑块（例如 Slick.js）、移动导航模式(Slidebars.js), 等等

如果您正在使用 Semantic UI 并且您决定 Foundation（或其他一些框架）有一个您想要使用的非常好的功能，您会经常发现框架有 CSS 和JS 也分解为单个组件。只需包含特定于您感兴趣的功能的 CSS 文件。在这种情况下，不应有重复代码，尽管可能存在命名空间冲突。

此外，如果您担心错过 normalize.css 的 v3.0.3，因为 Semantic 只包含 v3.0.1，我想这几乎没有区别。

如何不使用 Bower 和 Gulp 重复代码？

How not to repeat code using Bower and Gulp?

dry

package

bower

semantic-ui

gulp