13

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

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

4

3 回答 3

26

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

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

$ bower install --save bootstrap

这将为您下载 Bootstrap 3.0。

于 2013-08-24T19:11:34.983 回答
22

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

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

  4. 编辑 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']
// ...

  5. 编辑 app/index.html - 插入：

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

    和：

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

    在适当的情况下 - 这些将注入对 bower 管理的资源的引用（在我们的例子中是 bootstrap 的样式表和 JS）。

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

  6. grunt bower-install

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

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

基于此，我添加了一个子步骤来进行dist缩小工作。

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

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

@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
于 2013-09-26T17:15:53.083 回答
0

对于 sass Bootstrap 更新：

这对我有用：

bower install angular-bootstrap
bower install sass-bootstrap

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

也许应该添加一个--save

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

于 2014-02-13T13:09:57.540 回答