如何捆绑客户端组件（js / less / css / img）

Question

作为一个团队，我们已经建立了一个客户端组件库。每个组件都有一些资产（JS / LESS / CSS / IMG / FONTS）。目前我已经探索过，为了描述客户端组件，我可以使用Bower / Component（如果还有其他请告诉我）。 但我不知道如何（或者甚至可能）捆绑组件。让我们考虑一个场景：

1. 所以现在，我描述了每个组件（使用Bower / Component或其他），例如：

   • 组件A依赖于jQuery，jQuery UI
   • 组件B依赖于下划线，jQuery，组件A
   • 组件C依赖于组件B
   • 组件D依赖于组件A

2. 我想将它们捆绑在一个Web应用程序中。例如，我想指定我的应用程序使用组件C＆amp; D.结果我得到了一个：

   • JavaScript包（bundle.js），其中包含来自组件C的所有必需脚本+来自依赖项的JavaScript
   • CSS bundle（bundle.css），包含来自依赖项的Component C + CSS的所有必需样式。当我使用LESS时，有一个LESS很好 - ＆gt; CSS转换在中间。

3. 现在最终的任务是：在我的网络应用程序中，我想只包含一个JavaScript bundle.js和单个css bundle.css。

我可以想象，有一种工具可以检查组件＆＃39;元数据（bower.json / component.json / package.json）并对CSS / JS依赖关系图进行分析，并在输出包中仅包含一次所需文件。但是如何实现呢？

Answer 1

你问两件事：

1. 如何管理依赖关系
2. 如何将所有资源捆绑到一个文件中

因此，您需要两个工具才能获得所需的结果（列表中的第3行）。

使用Bower管理依赖关系

在我们当前的项目中，我们使用Bower来管理每个子项目的依赖项。 Bower将为您安装所有必需的依赖项。因此，如果这些是您项目的凉亭文件：

Component A | Component B | Component C | Component D
-jQuery     | -underscore | -Component B| -Component A
-jQuery UI  | -jQuery     |             |
            | -Component A|             |

您可以将组件C和B列为Web应用程序的依赖关系（再次在Bower中），这是Bower将为您安装的依赖关系列表：

• 的jQuery
• jQuery UI
• 下划线
• 组件A
• 组件B

在旁注中，如果A和B的jQuery版本存在差异，则需要选择一个。

将所有资源捆绑到一个文件

在Web应用程序中拥有正确的依赖项列表后，您需要设置一个流程，将这些依赖项捆绑到两个文件中（bundle.js＆amp; bundle.css）。您可以按照自己喜欢的方式执行此操作，但我建议您使用Grunt或Gulp等JavaScript任务运行程序。您可以在Google上找到有关如何设置连接任务的大量信息。

我们使用Grunt并使用grunt-usemin任务。我blogged a minimalistic guide如何设置它。或者你可以简单地使用grunt-contrib-concat任务（grunt-usemin也使用它）。