7

试用 Yeoman (1.0.4)。yo angular使用;生成了一个 Angular 应用程序 进入No使用 Sass 安装 Bootstrap，因为我想要使用 LESS 的 Bootstrap v 3。

搭建脚手架后，为了获得 Bootstrap 3，我输入了：

bower install bootstrap

将引导程序安装到bower_components/bootstrap文件夹中。但它没有在index.html文件中链接/包含 Bootstrap 的 CSS 或 JS。为什么？

该index.html文件确实有来自 bower_components 文件夹的 Angular js 文件：

    <!-- build:js scripts/modules.js -->
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbuild -->

但不是引导文件。为什么？我必须手动添加/链接到它们吗？我究竟做错了什么？为我的应用程序生成脚手架后如何添加 Bootstrap ？

4

5 回答 5

4

根据 yeoman 的入门指南：

# Install it and save it to bower.json
>bower install jquery-pjax --save

# If you're not using RequireJS...
>grunt bower-install

这应该将您的依赖项注入您的index.html文件中。

注意：
有一些设置需要完成，然后才能使用bower-install。
请参阅此处了解更多详细信息。

于 2013-11-14T20:17:33.713 回答
2

您必须编辑 index.html。Yeoman 生成器构建基础 index.html。Bower 仅将依赖项作为包下载......但仅此而已，它对您的应用程序以及您将如何使用它下载的包一无所知。您必须自己添加所需的文件。

于 2013-11-14T20:02:45.540 回答
1

使用https://github.com/stephenplusplus/grunt-bower-install，如果您的 index.html 中有以下内容

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->

然后 bower install 将在运行时将供应商文件添加到您的 html 中。否则，是的。

于 2014-02-26T18:52:08.633 回答
1

使用 yeoman，您可以使用--save标志安装依赖项以更新 bower.json 文件。

之后，您运行$ bower update（可选）并执行 a$ grunt wiredep将依赖项注入到您的index.html.

如果您查看index.htmlYeoman 生成的评论，您会看到如下内容：

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/modernizr/modernizr.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-block-ui/dist/angular-block-ui.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

正是在这些注释中，依赖项将被注入

于 2014-11-17T11:23:02.293 回答
0

Wiredep 无需依赖 Grunt 或任何其他构建工具即可完成：https ://github.com/taptapship/wiredep

npm install --save wiredep

在将注入依赖项的代码中插入占位符：

<html>
<head>
  <!-- bower:css -->
  <!-- endbower -->
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
</body>
</html>

让wiredep发挥它的魔力：

$ node
> require('wiredep')({ src: 'index.html' });

自 Bootstrap 版本 3.3.5 起，bootstrap.css 文件已从 Bootstrap 的包管理器 json 中删除。3.3.4因此，我必须在运行之前回滚到版本wiredep。

bower install --save bootstrap#3.3.4
于 2017-06-12T10:01:05.060 回答