yeoman webapp: Minified JS für mehrere HTML-Seiten

Question

Ich spiele mit der yeoman webapp generator herum und möchte mehrere minimierte JavaScript-Dateien für meine einzelnen Unterseiten für meine Seite haben. Allerdings webet die Webanwendung alle JavaScript-Dateien zu einem "großen" main.js, der nicht mit meinem Setup übereinstimmt.

In meinem Setup, main.js soll eine Art gemeinsame JavaScript-Datei für alle Seiten sein, aber jede Seite sollte eine zusätzliche JavaScript-Datei mit Sachen, die nur auf diese Seite bezieht. Z.B.

index.html -> verwendet main.js

subpage1.html -> verwendet main.js und subpage1.js

subpage2.html -> verwendet main.js und subpage2.js

Das Ergebnis aus gulp build ist ein großer main.js, die die main.js enthält, subpage1.js und das subpage2.js was zu Fehlern führt: wenn ichöffne, subpage2.js (die im großen main.js enthalten ist) versucht möglicherweise, auf HTML-Knoten zuzugreifen, die nur unter subpage2.html, aber nicht unter subpage1.html vorhanden sind.

ZB:

subpage1.html umfasst das große main.js mit subpage2.js

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

die subpage1.js UND subpage2.js enthält, aber wenn ich in subpage2.js Folgendes tun

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

das scheitert natürlich.

Wie muss ich die Gulfile anpassen, um dieses Problem zu lösen?

Answer 1

JS und CSS-Builds generieren mit uglify (früher bekannt als usemin) Sie könnten erweiterte Optionen und Funktionen aus ihrer Dokumentation finden, aber ich denke, Sie sollten Build-Block nach Ihren Bedürfnissen trennen.

Wenn Sie eine gemeinsame JS-Datei für jede Seite haben, müssen Sie sie für jede Seite zusammensetzen und einen neuen Block für seitenspezifische Dateien erstellen.

Hier ist ein Beispiel.

<!-- 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 --> 

Auch Sie könnten das gleiche für CSS-Datei-Builds tun.

<!-- 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 -->