一息userefが、私は私のプロジェクトで5つのHTMLファイルを持っており、すべてのは、このように底にuserefブロックを持つ複数のHTMLファイル

Question

で作業していない：

<!-- build:js static/js/main.js --> 
<script src="static/js/plugins.js"></script> 
<!-- endbuild --> 

すべての5つのファイルで

共通のJSファイルがplugins.jsです。私は、すべてのHTMLファイルにそのJSファイルが必要であり、すべてのファイルで繰り返されています。

<!-- build:js static/js/main.js --> 
<script src="static/js/jquery.barrating.min.js"></script> 
<script src="static/js/plugins.js"></script> 
<!-- endbuild --> 

そして、私の第五HTMLファイルには、このブロックがあります： 私の第二のHTMLファイルは、このブロックを持っている（再びそこにされてplugins.js）すべてのファイルイムでそう

<!-- build:js static/js/main.js --> 
<script src="static/js/jquery.matchHeight-min.js"></script> 
<script src="static/js/jquery.barrating.min.js"></script> 
<script src="static/js/plugins.js"></script> 
<!-- endbuild --> 

plugins.jsを使用すると、いくつかのファイルでは私はいくつかの他のライブラリを使います。しかし、私がタスクを実行すると、この3つのファイルはmain.jsに連結されません。 main.js内のものだけがplugins.jsからのコンテンツです。他のライブラリはmain.jsには含まれていません。 なぜそうですか？このようなプラグインを使ってもいいですか？

マイ一気タスク：

gulp.task('compress:js:html', ['clear:dist'], function() { 
    return gulp.src('./*.html') 
     .pipe(useref()) 
     .pipe(htmlmin({collapseWhitespace: true})) 
     .pipe(gulp.dest('./dist/')) 
}); 

Answer 1

あなたのすべてのHTMLファイルには、連結ファイル（static/js/main.js）に同じ場所を指定し、それらはすべて連結されるべき異なるソースファイルを指定します。あなたのHTMLファイルが処理される順番に応じて、別のstatic/js/main.jsとなります。あなたの場合は、最初の例のものです。

HTMLファイル1：

<!-- build:js static/js/main1.js --> 
<script src="static/js/plugins.js"></script> 
<!-- endbuild --> 

HTMLファイル2：

連結ファイルに別の場所を指定し、各HTMLファイルの場合

1. ：

   は、2つのオプションがあります

   <!-- build:js static/js/main2.js --> 
   <script src="static/js/jquery.barrating.min.js"></script> 
   <script src="static/js/plugins.js"></script> 
   <!-- endbuild --> 
   

   HTMLファイル3：

   <!-- build:js static/js/main3.js --> 
   <script src="static/js/jquery.matchHeight-min.js"></script> 
   <script src="static/js/jquery.barrating.min.js"></script> 
   <script src="static/js/plugins.js"></script> 
   <!-- endbuild --> 
   

   これは、ブラウザがページごとに作るために持っているリクエストの数を減らすことができますが、それは、ブラウザのキャッシュを活用しません。

2. すべて各HTMLファイルのJSファイルは、その特定のページにJSファイルが必要かどうかを示します。ブラウザが結果main.jsファイルをキャッシュします

   <!-- build:js static/js/main.js --> 
   <script src="static/js/jquery.matchHeight-min.js"></script> 
   <script src="static/js/jquery.barrating.min.js"></script> 
   <script src="static/js/plugins.js"></script> 
   <!-- endbuild --> 
   

   ので、それは一度だけダウンロードする必要があります：それはあなたのHTMLファイルのすべての3つの中で、次の必要があるということです。