使用gulp-useref如何添加額外的文件？

Question

我的html文件是這樣的：

... 
<!-- build:js build/js/vendor.js --> 
<script src="dep/angular/angular.js"></script> 
<!-- endbuild --> 

這樣生成文件：

<script src="build/js/vendor.xxxxxxxx.js"></script> 

現在我用gulp-angular-templatecache包中的所有視圖文件，生成template.js，我想將這份文件加入到編譯好的html文件裏面，該怎麼做呢？

我在additionalStreams設置選項中找到了gulp-useref文件，但我用來找到不想實現的功能。

Answer 1

我以另一種方式解決它。

寫在頁面上的第一：

<!-- build:templates --><!-- endbuild --> 

之前gulp-replace像這樣更換包裝：

<!-- build:js build/js/templates.js --> 
    <script src="build/js/templates.js"></script> 
<!-- endbuild --> 

最後統一彙編。

代碼：

var indexHtmlFilter = $.filter(['**/*', '!**/index_dev.html'], { 
    restore: true 
}); 

var fontglyphiconsMatch = /^\.\.\/fonts\/glyphicons/; 
var fontawesomeMatch = /^\.\.\/fonts\/fontawesome-/; 
var imgMatch = /^\.\.\/img\//; 

var matchUrlType = function(url){ 
    if(fontglyphiconsMatch.test(url)) 
     return url.replace(/^\.\./, '/dep/bootstrap-css-only'); 

    if(fontawesomeMatch.test(url)) 
     return url.replace(/^\.\./, '/dep/font-awesome'); 

    if(imgMatch.test(url)) 
     return url.replace(/^\.\./, ''); 
}; 
gulp.src('app/index_dev.html') 
    .pipe($.htmlReplace({ 
     templates: ` 
      <!-- build:js build/js/templates.js --> 
      <script src="build/js/templates.js"></script> 
      <!-- endbuild --> 
      ` 
    })) 
    .pipe($.useref()) 
    .pipe($.if('*.js', $.uglify({ 
     output: { 
      ascii_only: true 
     } 
    }))) 
    .pipe($.if('*.css', $.modifyCssUrls({ 
     modify: matchUrlType 
    }))) 
    .pipe($.if('*.css', $.cleanCss())) 
    .pipe(indexHtmlFilter) 
    .pipe($.rev()) 
    .pipe($.revFormat({ 
     prefix: '.' 
    })) 
    .pipe(indexHtmlFilter.restore) 
    .pipe($.revReplace()) 
    .pipe($.if('*.html', $.htmlmin({ 
     collapseWhitespace: true 
    }))) 
    .pipe($.if('index_dev.html', $.rename('index.html'))) 
    .pipe(gulp.dest('./app'));