2017-02-21 4 views
1

私はこのようなファイルをHTML:このような余分なファイルを追加するにはgulp-userefを使用しますか?

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

ビルドファイル:template.jsを生成し、今、私はすべてのビューファイルgulp-angular-templatecacheパッケージを使用

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

を、私はこの文書を追加したいと思いますコンパイル済みのhtmlファイル内に、どのように行うのですか?

私はadditionalStreams設定オプションでgulp-userefドキュメントを見つけましたが、私はその機能を達成したくないものを見つけることがありました。

答えて

1

別の方法で解決しました。最初のページに

書き込み:

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

最後にコンパイルを統一:

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

このように置き換えgulp-replaceで梱包前。

コード:

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')); 
関連する問題