logo标签列表

wiredep在使用bower时未注入文件

angularjsgulpwiredep
3

我有以下目录结构：

bower_components
node_modules
src
index.html
bower.json
package.json
gulpfile.js
.gitignore

我有一个 Gulp 任务，用于注入 Bower 依赖项，如下所示：

gulp.task('bower-inject', function () {
    gulp.src('./index.html')
        .pipe(wiredep())
        .pipe(gulp.dest('./'));
});

index.html

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="src/assets/images/favicon.ico">
        <title>ABC</title>

        <!-- bower:css -->
        <!-- endbower -->

        <!-- inject:css -->
        <!-- this is done with gulp inject which works as expected -->
        <!-- endinject -->
    </head>
    <body ng-controller="AppController as appVm">

        <div ui-view></div>

        <!-- bower:js -->
        <!-- endbower -->

        <!-- inject:js -->
        <!-- done via gulp-inject and works as expected -->
        <!-- endinject -->
    </body>

bower.json

"devDependencies": {
    "angular": "1.4.0",
    "angular-bootstrap": "~0.13.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "~3.3.4",
    "modernizr": "~2.8.3",
    "font-awesome": "~4.3.0"
  }

当我运行任务时，看到以下内容：

[00:24:50] 开始执行 'bower-inject'... [00:24:50] 'bower-inject' 执行完成，用时 14 毫秒

您有什么想法，我这里有什么遗漏吗？

你确定在覆盖 index.html 文件后它仍然看起来像那样吗？此外，你应该使用 dependencies 而不是 devDependencies；默认情况下，wiredep 不包括 devDependencies。 - Phil
devDependencies 更多地用于像 angular-mocks 这样的东西，即在构建过程中可能会使用的库（单元测试等），而不一定是在应用程序正常运行时使用的。 - Phil
你运行过 bower install 吗？ - Phil
是的，当我在依赖项和开发依赖项之间切换时，我删除了bower_components文件夹并再次运行了bower install。 - km1882
你的任务中还应该加入 return gulp.src(... - Phil
显示剩余2条评论
2个回答
2
这是最终对我有用的方法：
gulp.task('inject', function () {
    var target = gulp.src('./index.html');

    var sources = gulp.src(['src/**/*.js', 'src/**/*.css'], {read: false});

    return target
        .pipe(wiredep({
            devDependencies: true
        }))
        .pipe(inject(sources))
        .pipe(gulp.dest('./'));
});
很有可能你需要同时读写同一个文件的两个任务。 - Phil
0

Wiredep会在您安装包作为依赖项时注入脚本标签，而不是dev-dependencies。 因此，运行bower install --save angular angular-bootstrap angular-ui-router bootstrap modernizr font-awesome，然后运行gulp build即可。

注意：有些包需要在bower.json上进行覆盖配置。如果需要，请在这里查看有关bower覆盖的信息。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接