2016-03-23 10 views
1

ile çalışmıyor useref. Her HTML dosyasında bu JS dosyasına ve tüm dosyalarımda yinelenmesine ihtiyacım var.yudum Projemde 5 HTML dosyaları varsa ve her böyle dibinde bir useref bloğu vardır çoklu html dosyalarına

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

Ve benim beşinci HTML dosyası bu bloğu vardır: Benim ikinci HTML dosyası bu bloğu vardır (yine orada olduğu plugins.js) her dosya im Yani

<!-- 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 kullanarak ve bazı dosyalarda diğer kütüphaneleri kullanıyorum. Ama bu üç dosyayı çalıştırdığımda main.js. Main.js'deki tek şey, plugins.js kaynaklı. Diğer kütüphaneler main.js. Neden böyle? Bu eklentiyi bile kullanabilir miyim?

Benim yudum görev:

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

cevap

2

Tüm HTML dosyaları birleştirilmiş dosya (static/js/main.js) için aynı konumu belirtmek, ama hepsi birleştirilmelidir farklı kaynak dosyaları belirtin. HTML dosyalarınızın işlendiği sıraya bağlı olarak, farklı bir static/js/main.js ile sonuçlanırsınız. Durumunda ilk örneğinizden biri.

HTML Dosya 1:

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

HTML dosyası 2:

birleştirilmiş dosya için ayrı bir konum belirtmek her HTML dosyası için

  1. :

    İki seçeneğiniz vardır

    HTML Dosyası 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 --> 
    

    Bu tarayıcı her sayfa için yapmak zorundadır isteklerin sayısını azaltacaktır, fakat tarayıcının önbelleğe kaldıraç etmez. Her bir HTML dosyasında tüm JS dosyalarına, ilgili belirli bir sayfa için JS dosyasına ihtiyacınız olup olmadığına bakın. tarayıcılar çıkan main.js dosyayı önbelleğe alır

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

    yana yalnızca bir kez indirilir gerekecektir: Yani HTML dosyaları üçünde de şu var demektir.

+0

böylece useref ve usemin gibi eklentiler, aynı konumlarda aynı main.js içine js konstrüksiyonu yapamazlar? – riogrande

+1

Sanmıyorum, hayır. Her HTML dosyası, diğer HTML dosyalarında neyin tanımlandığına bakılmaksızın kendi başına işlenir. –

+0

benim çözüm - uglify ve sourcemaps ile dosyaları + gulp-concat kopyalama veya kopyalama olmadan sadece html yerini - gulp-replace-html. Her şey için teşekkürler dostum! – riogrande