yeoman webapp：用於多個HTML頁面的精簡JS

Question

我正在使用yeoman Webapp生成器，並希望頁面的各個子頁面具有多個縮小的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

main.js gulp build的結果是一個很大的main.js ，其中包含main.js ， subpage1.js和subpage2.js ，這會導致錯誤：如果我打開subpage1.html ， subpage2.js （ main.js ）可能試圖訪問只存在於HTML節點subpage2.html但不是在subpage1.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建立與正在生成丑化 （原名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 -->