yeoman webapp：用于多个 HTML 页面的缩小 JS

Question

我正在使用 yeoman webapp generator 并希望为我的页面的各个子页面拥有多个缩小的 JavaScript 文件。但是，webapp 将所有 JavaScript 文件连接到一个“大”main.js，这与我的设置不匹配。

在我的设置中，main.js 应该是所有页面的某种通用 JavaScript 文件，但每个页面都应该有一个附加的 JavaScript 文件，其中包含仅与该页面相关的内容。例如

index.html -> 使用main.js

subpage1.html -> 使用main.js 和subpage1.js

subpage2.html -> 使用main.js 和subpage2.js

gulp build 的结果是一个大的main.js，其中包含main.js、subpage1.js 和导致错误的subpage2.js：如果我打开subpage1.html、subpage2.js（即包含在大 main.js 中）可能会尝试访问仅存在于 subpage2.html 上但不存在于 subpage1.html 上的 HTML 节点。

例如：

subpage1.html 包含大的main.js 和subpage2.js

<script src="scripts/main.js"></script>

其中包含 subpage1.js 和 subpage2.js，但是如果我在 subpage2.js 中执行以下操作

$('#IdThatOnlyExistsOnSubPage2').someMethod(...)

这当然失败了。

如何调整 Gulpfile 来解决这个问题？

Answer 1

JS 和 CSS 构建是使用 uglify（以前称为 usemin）生成的，您可以从他们的文档中找到更高级的选项和功能，但我认为您应该根据需要分离构建块。

如果每个页面都有一个通用的 JS 文件，则必须为每个页面将它们放在一起，并为页面特定文件创建新块。

这里是例子。

<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->

<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->

您也可以对 CSS 文件构建做同样的事情。

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->

<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->