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

作为一个团队，我们build立了客户端组件库。 每个组件都有一些资源（JS / LESS / CSS / IMG / FONTS）。 目前我已经探讨了描述客户端组件，我可以使用鲍尔/组件（如果有其他任何请让我知道）。 但我不知道如何（或者即使有可能）捆绑组件 。 让我们考虑一个场景：

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

   • 组件A对jQuery，jQuery UI有依赖性
   • 组件B对下划线，jQuery，Component A有依赖性
   • 组件C对组件B有依赖性
   • 组件D对组件A有依赖性

2. 我想将它们捆绑在一个Web应用程序中。 例如，我想指定我的应用程序使用组件C和D.结果我会有一个：

   • JavaScript bundle（bundle.js）与来自组件C + JavaScript的所有必要脚本的依赖关系
   • CSS bundle（bundle.css），其中包含来自依赖关系的组件C + CSS的所有必要样式。 当我使用LESS时，在中间有一个LESS – > CSS转换是很好的。

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

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

Answer 1

你在问两个不同的东西：

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

所以你需要两个工具才能达到你想要的结果（列表中的第3位）。

使用Bowerpipe理依赖关系

在我们当前的项目中，我们使用Bower来pipe理每个子项目的依赖关系。 鲍尔将为您安装所有必要的依赖关系。 所以，如果这些是你的项目的凉亭文件：

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版本有所不同，您需要select一个。

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

一旦在Web应用程序中拥有正确的依赖关系列表，您将需要设置一个进程将其捆绑到两个文件（ bundle.js ＆ bundle.css ）中。 你可以用任何你喜欢的方式来做这个，但是我会build议使用一个JavaScript任务运行器，比如Grunt或者Gulp。 您可以在Google上find大量关于如何设置连接任务的信息。

我们使用Grunt并使用grunt-usemin任务。 我已经写了一个简单的指导如何设置。 或者你可以简单地使用grunt-contrib-concat任务（grunt-usemin也使用这个）。