yeoman webapp：複数のHTMLページ用に縮小されたJS

Question

私はyeoman webapp generatorで遊んでいて、自分のページの個々のサブページ用に複数の縮小されたJavaScriptファイルを用意したいと思います。しかし、webappはすべてのJavaScriptファイルを私の設定と一致しない1つの "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、subpage1.jsが含まれている大きなmain.jsで、エラーにつながるsubpage2.js：私が開けば、subpage2.js（大きな番号main.jsに含まれているもの）は、subpage2.htmlにのみ存在し、subpage1.htmlには存在しないHTMLノードにアクセスしようとする可能性があります。

例：

subpage1.htmlは私があればsubpage2.jsに以下、subpage1.jsとsubpage2.jsが含まれていsubpage2.js

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

で大きなmain.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 -->