Wie bekomme ich den richtigen Pfad für die Abhängigkeitsinjektion mit Hilfe von wiredep?

Question

Ich versuche, wiredep zu verwenden, um die CSS- und JS-Dateien von Bower in meiner App aufzunehmen. Ich habe den rohen index.html (den HTML-exculding Bower css und js) in app/rawHtml/index.html wie unten in der Ordnerstruktur angezeigt:

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 

Ich mag die app/rawHtml/index.html-app/index.html verwenden. Mein gulpfile für wiredep ist wie folgt:

gulpfile.js 

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

Nun ist die Datei index.html erstellt wird. Aber die Abhängigkeiten injiziert werden wie folgt, in Bezug auf 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> 

Statt in Bezug auf die Zieldatei app/index.html wie folgt:

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

Ich habe versucht, die Quelle zu tun zu halten und Ziel index.html in das gleiche Verzeichnis, aber ich habe die Option nicht gefunden, die Zieldatei umzubenennen. Wie verwende ich den Drahtabschneider, damit ich den richtigen Injektionspfad bekommen kann?

Answer 1

Okay, ich hatte das gleiche Problem. Ich denke, Sie müssen Ihre index.html in app Dir vor dem Ausführen wiredep Befehl platzieren.

gulpfile.js 

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