How To Wire different Dependencies in production vs development

Question

Is there a best practice for configuring Bower.json so that files for development and files for production are setup in different areas and play nicely with tools like WireDep?

I am using this Angular plugin for google places Kuhnza/Angular-Google-Places-Autocomplete

The Bower.json for this project has both raw and minified files listed in the main data structure.

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": []
}

When I run my wiredep task, it includes both the minified and raw files in my 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'));
});

Generated Output

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