请教一个 gulp 的问题

是这样的，前段时间有用过 gulp 这个构建工具，对这货感觉挺好的，很方便开发。
于是想把这个工具用到另外一个项目中。不过这个过程中我遇到了个问题，在网上也找不到相应的解决方案。

之前用 gulp 时，由于那个项目是个单页应用，所以只有一个 html 入口文件，因此，什么 bower 下载的包的引入啊，js 的合并/压缩等都可以用 gulp 插件来实现，而且相当简单。

但是现在的项目不是一个简简单单的 html 文件，而是有多个 html 文件，而不同的 html 文件所需要的依赖又不一样，所以没办法用之前的方法，用 wiredep 来将 bower 下载的包引入页面中。

比如，假设我的 bower.json 如下：

{
    "dependencies": {
        "a": "latest",
        "b": "latest",
        "c": "latest"
    }
}

我有两个页面，其中一个页面需要 a 和 b 这两个包，而另外一个页面需要 a 和 c 这两个包。除了 bower 下载的包之外，对于每个单独的页面我还有额外独立的 js 文件和css 文件等。
gulp 有个插件叫 gulp-inject 用来向页面注入一些内容的，于是我想，能不能在每个页面里面这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <!-- common:css -->
    <!-- endinject -->

    <!-- inject:css -->
    <!-- endinject -->
</head>
<body>
    <!-- 各个页面的其他代码 -->

    <!-- common:js -->
    <!-- endinject -->

    <!-- inject:js -->
    <!-- endinject -->    
</body>
</html>

然后最终生成如下效果：

index.html 页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>

    <script src="a.js"></script>
    <script src="b.js"></script>
    <script src="index.js"></script>
</body>
</html>

about.html 页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="about.css">
</head>
<body>

    <script src="a.js"></script>
    <script src="c.js"></script>
    <script src="about.js"></script>
</body>
</html>

我能想到的就是为每个页面创建一个配置文件，指定每个页面所需要的 bower 包，以及除此之外其他资源，比如js,css等。然后 gulp 插件在注入页面的时候，就根据每个页面的配置来动态地注入相应的各种资源。

我想问的是，现在有没有这样的一款插件能够实现这种效果？

另外还有一个问题就是，对于页面的静态资源的合并和打包，这个该怎么搞。。因为每个页面所使用到的库以及各自的 js 等都不一样，那么是不是得针对每个页面相应地生成一个合并压缩后的 js 和 css 文件？