这是一个创建于 3431 天前的主题，其中的信息可能已经有所发展或是发生改变。
是这样的，前段时间有用过 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 文件？
 |
1
emric 2015-08-07 17:17:46 +08:00
你想要的应该是 AMD CMD 之类的吧.
|
 |
2
FrankFang128 2015-08-07 17:21:15 +08:00 via Android  1
请用我写的 gulp-html-extend 插件
|
|
3
FrankFang128 2015-08-07 17:22:30 +08:00 via Android
配合类似 gulp-usemin 的插件即可。 gulp usemin 已被启用，不过有代替品。
好久没用 gulp 了 |
|
4
FrankFang128 2015-08-07 17:23:06 +08:00 via Android
已被弃用
|
 |
5
learnshare 2015-08-07 17:38:13 +08:00
我都是手动引入 bower 安装的静态文件，release 的时候用了另一个 html 文件。
require.js 虽然可以应对这些问题，但会变得很麻烦； 如果每个页面引用的资源不同，那最好还是将 JS/CSS 压缩成独立的文件。 |
 |
6
zrp1994 2015-08-07 17:42:35 +08:00
来给楼主安利下webpack
其实建议库直接用cdn，自己写的js打包成一个文件 |
 |
7
serenader OP @FrankFang128 感谢回复，我去看一下。
@learnshare 您的意思是说，对于每个页面引用的资源不同，那么只对这些资源进行压缩，而不对他们进行合并吗？ @zrp1994 刚刚有了解到，不过只是粗略地看了一下。貌似是一个 module loader ？ |
|
8
zrp1994 2015-08-07 17:56:08 +08:00 2
@serenader webpack功能太过强大以至于我觉着都有些复杂了。。。load的不仅是js，而且静态文件，甚至是图片都可以打包。同时它是可以结合grunt或gulp使用的，可以替代requirejs。针对楼主这个情况，可以设置多个entry来定义不同界面的js分开打包。比如下面就是分别打包自己写的js和库，我相信换个写法就能满足你的要求。
entry = { bundle: bundle, vendor: ['jquery', 'marked', 'react/addons', 'highlight.js'], }; |
|
10
learnshare 2015-08-07 18:29:50 +08:00
|
 |
11
ChefIsAwesome 2015-08-07 18:32:32 +08:00
那个依赖关系不复杂的话就手写吧，方便快捷。真是把东西拆的很碎的，就上webpack，能帮你分析依赖关系，找公共部分。
总觉得现在做前端把这些东西搞得太复杂了。只是往文件里添行代码而已，各种脚本都用上了。这样下去不好。 |
 |
12
loveyu 2015-08-07 20:54:06 +08:00
在我印象中css和js细化就好了，然后指定顺序合并就好。把HTML也弄这么细，感觉过段时间自己理清都不容易。
|
Select Language