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

Question

我使用yo webapp或yo angular来创建一个新的项目,我收到Bootstrap include是版本2.3.2,但我想使用最新版本的Bootstrap.

如何在命令提示符下更新Bootstrap包,稍后在创建新的webapp或yo angular时更新,选择包括Twitter Bootstrap是最新版本？

Answer 1

Yeoman的webapp和角度生成器抓住Sass for Bootstrap,它基于Twitter Bootstrap的2.3.2版本.

运行yo webappor后yo angular,可以通过运行以下命令添加Bootstrap 3.0.

$ bower install --save bootstrap

这将为您下载Bootstrap 3.0.

Answer 2

@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 -->
   

   在适当的地方 - 那些将注入对凉亭管理资源的引用(在我们的例子中是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}).

6. grunt bower-install

准备.现在运行server(grunt server)和Bootstrap 3将可用.

备注 - 2013年10月5日更新 - 受@ Luke在评论中的调查启发:

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

Bower的注射工作,缩小也是如此,但是我对这种方法并不满意.
原因:

1. [minor]我们没有使用凉亭获得的已经缩小的资源.
2. 将所有类型的CSS/JS缩小为SINGLE文件是一个非常蹩脚的想法.在应用程序中包含外部依赖项的更好方法是在CDN-fetch(dist)和使用bower(dev)获取的本地副本之间进行切换.像maven配置文件一样.
3. 根据应用程序的大小,下载一体化资源(尤其是JavaScripts)将减慢首次遇到我们的应用程序.
   稍后,应用程序的其余部分将加载更快,更真实,但是当用户第一次进入我们的页面时,必须先抢先下载那些庞大的单文件管理器.

@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