あなたのjavascriptファイルを自動で挿入します

Question

私はちょうどグリップにつきますuseminとwiredepです。私は私のindex.htmlファイルでこれを持っている：

<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
<!-- build:css(.) styles/vendor.css --> 
<!-- bower:css --> 
<!-- endbower --> 
<!-- build:css(.tmp) styles/core.css --> 
<link rel="stylesheet" href="styles/core.css"> 
<!-- endbuild --> 

私はを実行する場合は、を構築うなり声、index.htmlをは、こののように変更されます。

<!-- build:css(.) styles/vendor.css --> 
<!-- bower:css --> 
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" /> 
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" /> 
<link rel="stylesheet" href="bower_components/ng-notify/src/styles/ng-notify.css" /> 
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" /> 
<!-- endbower --> 
<!-- endbuild --> 
<!-- build:css(.tmp) styles/core.css --> 
<link rel="stylesheet" href="styles/core.css"> 
<!-- endbuild --> 

これは素晴らしいですが、それだけをbower：cssファイル（これはのwiredepで行われていると信じています）。私のページをさらに見てください私はJavaScriptファイルに似ていて、それも同様に動作します。 私はow n個のJavaScriptファイル。現在私は約100を持っており、私は手動でそれを私のsrc/index.htmlに入れました。私のアプリケーションが構築されるとき、useminは、私のスクリプトを、concatinated、uglifiedバージョンに置き換えます。しかし、私がビルドするときには、src/index.htmlからsrc/appディレクトリのすべてのスクリプトを取得し、それらをhtmlファイルに挿入したいと思います。

これはできますか？

Answer 1

grunt-injectorを使用してこれを把握することができました。 私はこのようなうなり声-インジェクターを使用するために私のGruntfileを設定した：

// Automatically inject my components into index.html 
injector: { 
    options: { 
    template: '<%= yeoman.app %>/index.html' 
    }, 
    html: { 
    options: { 
     transform: function (filePath) { 
      return '<script type="text/ng-template" src="' + filePath.replace('/src/', '') + '"></script>'; 
     } 
    }, 
    files: { 
     '<%= yeoman.app %>/index.html': [ 
     '<%= yeoman.app %>/app/**/*.html' 
     ] 
    } 
    }, 
    scripts: { 
    options: { 
     transform: function (filePath) { 
      return '<script src="' + filePath.replace('/src/', '') + '"></script>'; 
     } 
    }, 
    files: { 
     '<%= yeoman.app %>/index.html': [ 
     '<%= yeoman.app %>/app/**/*.module.js', 
     '<%= yeoman.app %>/app/**/*.js' 
     ] 
    } 
    }, 
    styles: { 
    options: { 
     transform: function (filePath) { 
      var media = filePath.indexOf('print') > -1 ? 'print' : 'screen'; 
      return '<link rel="stylesheet" media="' + media + '" href="' + filePath.replace('/.tmp/', '') + '" />'; 
     } 
    }, 
    files: { 
     '<%= yeoman.app %>/index.html': [ 
     '.tmp/styles/**/*.css' 
     ] 
    } 
    } 
}, 

そしてindex.htmlの私に、私はちょうどこのようインジェクタコメント入れ：

<!-- injector:css --> 
    <!-- endinjector --> 

をこれは次のように変換されました：

<!-- injector:css --> 
    <link rel="stylesheet" media="screen" href="styles/core.css" /> 
    <link rel="stylesheet" media="print" href="styles/print.css" /> 
    <!-- endinjector --> 

それがそれだった。