yeoman webapp:多个HTML页面的缩小JS

Question

我正在使用 yeoman webapp 生成器，并希望为我的页面的各个子页面提供多个缩小的 JavaScript 文件。但是，Web应用程序将所有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节点。

例如：

子页面1.html包括带有subpage2.js的大main.js

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

其中包含子页面 1.js 和子页面 2.js，但是如果我在子页面 2 中执行以下操作.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 -->