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

Question

我正在使用 yeoman webapp generator 并希望为我的页面的各个子页面提供多个缩小的 JavaScript 文件。但是，webapp 将所有 JavaScript 文件合并为一个 "big" 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 但不存在于 [=] 上的 HTML 节点17=].

例如：

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 (formerly known as 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 -->

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

yeoman webapp: Minified JS for multiple HTML pages

javascript

jquery

minify

yeoman

gulp