使用Wiredep在Angular应用中添加Bower软件包

Question

I am relatively new to angular js & gulp. I am currently trying ionic framework for mobile apps as well. I started of with ionic tabs template, I am using bower for js libraries. I am have added a few bower packages in my bower.json file and want to use wiredep to inject those files into my index.html. My problem is that when I use wiredep in cli or gulp task it only adds files from two of my packages that I added, but not the ones from ionic.

Extract from index.html

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>

<!-- bower:js -->
<script src="lib/angular/angular.js"></script>
<script src="lib/ng-azure-mobile-service/ng-azure-mobile-service.min.js"></script>
<script src="lib/ng-azure-mobile-service/MobileServices.Web-1.2.5.js"></script>
<!-- endbower -->

You can see that my bower:js section only contains the three files from my bower package not from ionic. In ideal case I must be able to remove the first 3 lines and defend on wiredep to add them for me.

bower.json

{
  "name": "oz-beauty",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.0.0-beta.14"
  },
  "dependencies": {
    "ng-azure-mobile-service": "~1.3.5"
  },
  "overrides": {
    "ionic": {
      "main": ["lib/ionic/js/ionic.bundle.js"]
    }
  }
}

Kindly let me know if I'm missing something.

Answer 1

If you use gulp, you can use devDependencies flag of wiredep plugin.

gulp.task('bower', function () {
   gulp.src('./app/index.html')
     .pipe(wiredep({
        devDependencies: true
      }))
     .pipe(gulp.dest('./dest'));
});