twitter-bootstrap 如何在 webapp 或 yo angular 上更新和包含 Twitter Bootstrap 3？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18422020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update and include Twitter Bootstrap 3 on webapp or yo angular?
提问by Loc_rabbirt
I used yo webapp or yo angular to create new a project, and I received Bootstrap include is version 2.3.2, but I want use the latest version of Bootstrap.
我使用 yo webapp 或 yo angular 创建新项目，我收到 Bootstrap include is version 2.3.2，但我想使用最新版本的 Bootstrap。
How can I update the Bootstrap package with command prompt and later update when create new webapp or yo angular, choose include Twitter Bootstrap is last version?
如何使用命令提示符更新 Bootstrap 包，然后在创建新的 webapp 或 yo angular 时更新，选择包含 Twitter Bootstrap 是最新版本？
回答by micjamking
Yeoman's webapp & angular generators grab Sass for Bootstrap, which is based on the 2.3.2 build of Twitter Bootstrap.
Yeoman 的 webapp 和 angular 生成器为 Bootstrap 抓取了 Sass，它基于 Twitter Bootstrap 的 2.3.2 版本。
After you run yo webappor yo angular, you can add Bootstrap 3.0 by running the following command.
运行yo webapp或 后yo angular，您可以通过运行以下命令来添加 Bootstrap 3.0。
$ bower install --save bootstrap
This will download Bootstrap 3.0 for you.
这将为您下载 Bootstrap 3.0。
回答by vucalur
@micjamking answer is a really good hint, but since with Yeoman things should be easier, I'll save you some googling:
@micjamking 的回答是一个非常好的提示，但是因为使用 Yeoman 事情应该更容易，我会为您节省一些谷歌搜索：
yo angular- Say 'No' to Bootstrap here - otherwise it'll download 2.x versionbower install --save bootstrapnpm install --save-dev grunt-bower-installedit Gruntfile.js - insert marked lines:
// ... } 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'] // ...edit app/index.html - insert :
<!-- bower:css --> <!-- endbower -->and:
<!-- bower:js --> <!-- endbower -->where appropriate - those will inject references to bower-managed resources (bootstrap's stylesheet and JS in our case).
update 10/5/2013:Consider placing
bower:xxxinsidebuild:xxx.
In our case,bower:cssinsidebuild:cssandbower:jsinsidebuild:js.
This is needed for minification to work when assemblingdist. However I consider this approach not so perfect - see Remarks below. I'm excused a little bit, since this is the very same way the bootstrap version obtained by Yeoman by default gets included in our app :-P
Note:To get css minification working you might need changingbuild:css(.tmp)tobuild:css({.tmp,app}).grunt bower-install
yo angular- 在这里对 Bootstrap 说“不” - 否则它会下载 2.x 版本bower install --save bootstrapnpm 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 -->在适当的情况下 - 这些将注入对凉亭管理资源的引用（在我们的例子中是引导程序的样式表和 JS）。
更新2013年10月5日：考虑将
bower:xxx内build:xxx。
在我们的例子中，bower:cssinsidebuild:css和bower:jsinsidebuild:js。
这是在组装时缩小工作所必需的dist。但是我认为这种方法不是那么完美 - 请参阅下面的备注。我有点抱歉，因为这与默认情况下由 Yeoman 获得的引导程序版本包含在我们的应用程序中的方式非常相似：-P
注意：要使 css 缩小工作，您可能需要更改build:css(.tmp)为build:css({.tmp,app}).grunt bower-install
Ready. Now run server (grunt server) and Bootstrap 3 will be available.
准备好。现在运行服务器 ( grunt server) 并且 Bootstrap 3 将可用。
Remarks - Update 10/5/2013 - inspired by @Luke's enquiry in a comment备注 - 2013 年 10 月 5 日更新 - 灵感来自@Luke 在评论中的询问：
Based on thisI added one sub-step to make distminification work.
基于此，我添加了一个子步骤来进行dist缩小工作。
Bower's injecting works, so does minifying, however I'm not so happy with this approach.
Reasons:
Bower 的注入有效，缩小也有效，但是我对这种方法不太满意。
原因：
- [minor]We're not using already minified resources obtained by bower.
- Minifying ALL kinds of CSS/JS into a SINGLE file is a pretty lame idea. A better way to include external dependencies in your application would be to have a switch between CDN-fetch (dist) and local copies obtained with bower (dev). Sth like maven profiles.
- Depending on the application size, downloading all-in-one resources, particularly JavaScripts, will slow down first encounter with our application.
Later on the rest of the application will be loaded faster, true, but the first time user enters our page, those bulky single-filerswill have to be downloaded preemptively.
- [minor]我们没有使用由 bower 获得的已经缩小的资源。
- 将所有类型的 CSS/JS 压缩到一个文件中是一个非常蹩脚的想法。在应用程序中包含外部依赖项的更好方法是在 CDN-fetch (dist) 和使用 bower (dev) 获取的本地副本之间进行切换。像 Maven 配置文件一样。
- 根据应用程序的大小，下载多合一资源，尤其是 JavaScript，会减慢第一次遇到我们的应用程序的速度。
稍后应用程序的其余部分将加载得更快，这是真的，但是用户第一次进入我们的页面时，必须抢先下载那些庞大的单文件程序。
@yao tony also hadn't found this approach cool - see the referenced question.
@yao tony 也没有发现这种方法很酷 - 请参阅引用的问题。
Update Nov 2013:You can use grunt's cdnifytask. It's cool
2013 年 11 月更新：您可以使用 grunt 的cdnify任务。这很酷
Software versions I was using:
我使用的软件版本：
user@machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6
回答by Sarabadu
For sass Bootstrap update:
对于 sass Bootstrap 更新：
This Works for me:
这对我有用：
bower install angular-bootstrap
bower install sass-bootstrap
and select the new versions of both...
并选择两者的新版本...
maybe should add a --save
也许应该添加一个 --save
Note:sass-bootstrap is bean deprecated, is now a official bower for sass version of bootstrap https://github.com/twbs/bootstrap-sassbut i dont tried it.
注意：sass-bootstrap 已被弃用，现在是 sass 版本的 bootstrap https://github.com/twbs/bootstrap-sass的官方凉亭，但我没有尝试过。
