如何使用wiredep獲得正確的依賴注入路徑？

Question

我正在嘗試使用wiredep在我的應用程序中包含來自bower的css和js文件。 我在app/rawHtml/index.html有原始的index.html （html彎曲的Bows 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.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和目標index.html保留在同一目錄中，但是找不到重命名目標文件的選項。 如何使用wiredep，以便獲得正確的注射路徑？

Answer 1

好的，我遇到了同樣的問題。 我想你需要在運行wiredep命令之前將index.html放在app dir中。

gulpfile.js

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