angularjs - 本番環境と開発環境で異なる依存関係を配線する方法

Question

開発用のファイルと本番用のファイルが異なる領域にセットアップされ、WireDep などのツールで適切に再生されるように、Bower.json を構成するためのベスト プラクティスはありますか?

Google プレイス用にこの Angular プラグインを使用していますKuhnza/Angular-Google-Places-Autocomplete

このプロジェクトの Bower.json には、主なデータ構造にリストされている生のファイルと圧縮されたファイルの両方があります。

Bower.json

{
  "name": "angular-google-places-autocomplete",
  "version": "0.2.7",
  "main": [
      "./src/autocomplete.js",
      "./src/autocomplete.css",
      "./dist/autocomplete.min.js",
      "./dist/autocomplete.min.css"
  ],
  "dependencies": {
    "angular": "^1.2.x"
  },
  "devDependencies": {
    "angular-mocks": "^1.2.x"
  },
  "ignore": []
}

wireep タスクを実行すると、圧縮されたファイルと生のファイルの両方が Index.html に含まれます。

/ ------------------------------------------------------------------------------------------
// Wire Dependenciews from root bower.json in the index.html, e.g. Inject bower components
// ------------------------------------------------------------------------------------------
gulp.task('wiredep', function () {
    var wiredep = require('wiredep').stream;

    gulp.src('app/styles/*.scss')
      .pipe(wiredep({
          ignorePath: /^(\.\.\/)+/
      }))
      .pipe(gulp.dest('app/styles'));

    gulp.src('app/*.html')
      .pipe(wiredep({
          exclude: ['bootstrap-sass-official'],
          ignorePath: /^(\.\.\/)*\.\./
      }))
      .pipe(gulp.dest('app'));
});

生成された出力

<script src="/bower_components/angular-google-places-autocomplete/src/autocomplete.js"></script>
<script src="/bower_components/angular-google-places-autocomplete/dist/autocomplete.min.js"></script>