javascript - 使用wiredep在Angular应用程序中添加bower包

Question

我对 Angular JS 和 gulp 比较陌生。我目前也在尝试移动应用程序的 ionic 框架。我从 ionic tabs 模板开始，我使用 Bower 作为 js 库。我在 Bower.json 文件中添加了一些 Bower 包，并希望使用wiredep 将这些文件注入(inject)到我的 index.html 中。我的问题是，当我在 cli 或 gulp 任务中使用wiredep时，它只添加我添加的两个包中的文件，而不是ionic中的文件。

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

您可以看到我的 Bower:js 部分仅包含来自 Bower 包的三个文件，而不是来自 ionic 的三个文件。在理想情况下，我必须能够删除前 3 行并在wiredep 上进行防御，以便为我添加它们。

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

如果我遗漏了什么，请告诉我。

Answer 1

如果你使用gulp，你可以使用wiredep插件的devDependencies标志。

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