我正在尝试使用wiredep在我的应用程序中包含来自bower的css和js文件。我在index.html中有原始的app/rawHtml/index.html(html模制的弓形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.htmlapp/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,以便获得正确的注射路径?

最佳答案

好吧,我有同样的问题。我猜您需要在运行index.html命令之前将app放在wiredep目录中。

gulpfile.js

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

关于javascript - 如何使用wiredep获取正确的依赖项注入(inject)路径?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36195734/

10-11 13:02
查看更多