如何在 webapp 或 yo angular 上更新和包含 Twitter Bootstrap 3？

Posted 2023-03-06

【中文标题】如何在 webapp 或 yo angular 上更新和包含 Twitter Bootstrap 3？

【英文标题】：How to update and include Twitter Bootstrap 3 on webapp or yo angular?

【发布时间】：2013-08-27 15:18:30

【问题描述】：

我使用 yo webapp 或 yo angular 创建新项目，我收到的 Bootstrap 包含版本是 2.3.2，但我想使用最新版本的 Bootstrap。

如何在创建新的 webapp 或 yo angular 时使用命令提示符更新 Bootstrap 包并稍后更新，选择包含 Twitter Bootstrap 是最新版本？

【问题讨论】：

对于尝试将 v3 与 angular-generator 一起使用的任何其他人，该项目刚刚更新并包含它。转到this issue 并按照说明进行操作。

【参考方案1】：

Yeoman 的 webapp 和角度生成器为 Bootstrap 抓取 Sass，它基于 Twitter Bootstrap 的 2.3.2 构建。

运行yo webapp或yo angular后，可以通过运行以下命令添加Bootstrap 3.0。

$ bower install --save bootstrap

这将为您下载 Bootstrap 3.0。

【讨论】：

D:\Web Design\html-CSS\Bootstrap Test>bower install --save bootstrap bower 克隆 git://github.com/twbs/bootstrap.git C:\Users\TienLoc\AppData \Roaming\npm\node_modules\bower\node_modules\tmp\lib\tmp .js:260 throw err; ^ 错误：在 Process.ChildProcess._handle.onexit (child_process.js:771:34) 的 errnoException (child_process.js:980:11) 处产生 ENOENT ----------------- -------------------------------------------------- ------------------------------ 执行命令时收到错误

您的PATH 中是否安装并使用了 Git？

我安装了 Git，但在我的 PATH 中不可用，我将它添加到我的 PATH，但没有解决问题。

你试过更新凉亭npm update -g bower吗？您可能想看看this thread in in Github，似乎您遇到的问题对于在 Windows 上使用特定 git 设置的某些用户来说是一个常见问题。另外，我上面提供的答案是正确的，您现在遇到的问题与原来的问题是分开的，请您标记为正确吗？

tks 你寻求帮助，但命令没有为我的应用程序文件夹设置引导程序，不要更改样式文件或文件夹，无论如何你帮助更正，我标记为正确

【参考方案2】：

@micjamking 的回答是一个非常好的提示，但是由于使用 Yeoman 事情应该会更容易，我会为您节省一些谷歌搜索：

yo angular - 在这里对 Bootstrap 说“不” - 否则它将下载 2.x 版本 bower install --save bootstrap npm install --save-dev grunt-bower-install

编辑 Gruntfile.js - 插入标记行：

// ...
 catch (e) 

grunt.loadNpmTasks('grunt-bower-install');             // INSERT

grunt.initConfig(
    yeoman: yeomanConfig,
    'bower-install':                                  // INSERT BEGIN
        target:                                       //   .
            html: '<%= yeoman.app %>/index.html',      //   .
            ignorePath: '<%= yeoman.app %>/'           //   .
                                                      //   .
    ,                                                 // INSERT END
    watch: 
        coffee: 
            files: ['<%= yeoman.app %>/scripts/,*/*.coffee'],
            tasks: ['coffee:dist']
// ...

编辑 app/index.html - 插入：

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

和：

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

在适当的地方——那些将注入对 bower 管理的资源的引用（在我们的例子中是 bootstrap 的样式表和 JS）。

2013 年 10 月 5 日更新： 考虑将 bower:xxx 放在 build:xxx 中。 在我们的例子中，bower:css 在 build:css 中，bower:js 在 build:js 中。 在组装dist 时，这是缩小工作所必需的。但是我认为这种方法不是那么完美 - 请参阅下面的备注。我有点抱歉，因为这与默认情况下 Yeoman 获得的引导版本包含在我们的应用程序中的方式完全相同：-P注意： 要使 css 缩小工作，您可以需要将build:css(.tmp) 更改为build:css(.tmp,app)。

grunt bower-install

准备好了。现在运行服务器 (grunt server)，Bootstrap 3 将可用。

---

备注 - 2013 年 10 月 5 日更新 - 灵感来自 @Luke 在评论中的询问

：

基于this，我添加了一个子步骤以使dist 缩小工作。

Bower 的注入有效，缩小也有效，但是我对这种方法不太满意。 原因：

[minor] 我们没有使用 bower 获得的已经缩小的资源。 将所有类型的 CSS/JS 压缩到一个文件中是一个非常蹩脚的想法。在应用程序中包含外部依赖项的更好方法是在 CDN-fetch (dist) 和使用 bower (dev) 获得的本地副本之间进行切换。类似于 Maven 配置文件。 根据应用程序的大小，下载一体化资源，尤其是 javascript，会减慢第一次使用我们的应用程序的速度。 稍后应用程序的其余部分将加载得更快，这是真的，但是当用户第一次进入我们的页面时，那些庞大的 single-filers 将不得不被抢先下载。

@yao tony 也没有发现这种方法很酷 - 请参阅引用的问题。

2013 年 11 月更新：您可以使用 grunt 的 cdnify 任务。很酷

---

我使用的软件版本：

user@machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6

【讨论】：

这完全帮助了我。不过有一个问题：你如何让它把 *.min.css|js 版本放在那里呢？在 grunt 构建期间特别有用。

好点@Luke。我找到了解决方法，但我并不为此感到自豪。请参阅我的更新答案。

这让 bower Yeoman 变得更容易了。今天试了一下，最后我没有 bootstrap3 @micjamking 的回答。

error "bower-install.app.src missing" - 好像他们改变了配置github.com/stephenplusplus/grunt-bower-install，添加"src: ['/index.html']"在（或代替）“html: '

@joeriks：几个月前我的回答很有用。现在generator-webapp（generator-angular 依赖它）创建项目，所有这些配置都是开箱即用的（grunt-bower-install 已配置（但未安装），bower-managed boostrap3），所以最好只说'是的，当“你想包括 Twitter Bootstrap 吗？”问题弹出。不过请确保您使用最新版本的yo 和generator-angular。

【参考方案3】：

对于 sass Bootstrap 更新：

这对我有用：

bower install angular-bootstrap
bower install sass-bootstrap

并选择两者的新版本...

也许应该添加一个--save

注意： sass-bootstrap 已弃用，现在是 sass 版本的 bootstrap https://github.com/twbs/bootstrap-sass 的官方凉亭，但我没有尝试过。