如何使用wiredep获得正确的依赖注入路径？答案

【问题标题】：How to get correct dependency injection path using wiredep?如何使用wiredep获得正确的依赖注入路径？
【发布时间】：2016-03-24 08:17:28
【问题描述】：

我正在尝试使用 wiredep 在我的应用程序中包含来自 bower 的 css 和 js 文件。我在app/rawHtml/index.html 中有原始的index.html（html 排除bower css 和js），如下面的文件夹树所示：

 app
   ├── bower_components
   │   ├── lib1
   │   │   ├── lib1.css
   │   │   ├── lib1.js
   │   │   ├── bower.json
   │   │   ├── package.json
   │   │   └── README.md
   │   ├── lib2
   │   │   ├── lib2.css
   │   │   ├── lib2.js
   │   │   ├── bower.json
   │   │   ├── package.json
   │   │   └── README.md
   │   │       ├── globals.js
   │   │       ├── locale-header.js
   │   │       └── test-header.js
   ├── index.html
   └── rawHtml
       └── index.html

我想使用app/rawHtml/index.html 到app/index.html。 wiredep 我的 gulpfile 如下：

gulpfile.js

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

现在 index.html 文件已创建。但是依赖注入如下，关于app/rawHtml/index.html：

 <!-- bower:css --> 
 <link rel="stylesheet" href="../bower_components/lib1/lib1.css" />                                                             
 <link rel="stylesheet" href="../bower_components/lib2/lib2.css" />

<!-- bower:js -->
<script src="../bower_components/lib1/lib1.js"></script>
<script src="../bower_components/lib2/lib2.js"></script>

而不是相对于目标文件app/index.html如下：

 <!-- bower:css --> 
 <link rel="stylesheet" href="bower_components/lib1/lib1.css" />                                                             
 <link rel="stylesheet" href="bower_components/lib2/lib2.css" />

<!-- bower:js -->
<script src="bower_components/lib1/lib1.js"></script>
<script src="bower_components/lib2/lib2.js"></script>

我尝试将源和目标index.html 保留在同一目录中，但我没有找到重命名目标文件的选项。如何使用wiredep才能获得正确的注入路径？

【问题讨论】：

标签： javascript wiredep

【解决方案1】：

好的，我遇到了同样的问题。我猜你需要在运行wiredep 命令之前将index.html 放在app 目录中。

gulpfile.js

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

【讨论】：