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.
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?
Yeoman's webapp & angular generators grab Sass for Bootstrap, which is based on the 2.3.2 build of Twitter Bootstrap.
After you run yo webapp
or yo angular
, you can add Bootstrap 3.0 by running the following command.
$ bower install --save bootstrap
This will download Bootstrap 3.0 for you.
@micjamking answer is a really good hint, but since with Yeoman things should be easier, I'll save you some googling:
yo angular
- Say 'No' to Bootstrap here - otherwise it'll download 2.x version
bower install --save bootstrap
npm install --save-dev grunt-bower-install
edit 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:xxx
inside build:xxx
.
In our case, bower:css
inside build:css
and bower:js
inside build:js
.
This is needed for minification to work when assembling dist
. 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 changing build:css(.tmp)
to build:css({.tmp,app})
.
grunt bower-install
Ready. Now run server (grunt server
) and Bootstrap 3 will be available.
Remarks - Update 10/5/2013 - inspired by @Luke's enquiry in a comment:
Based on this I added one sub-step to make dist
minification work.
Bower's injecting works, so does minifying, however I'm not so happy with this approach.
Reasons:
- [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-filers will have to be downloaded preemptively.
@yao tony also hadn't found this approach cool - see the referenced question.
Update Nov 2013: You can use grunt's cdnify
task. It's cool
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
For sass Bootstrap update:
This Works for me:
bower install angular-bootstrap
bower install sass-bootstrap
and select the new versions of both...
maybe should add a --save
Note: sass-bootstrap is bean deprecated, is now a official bower for sass version of bootstrap https://github.com/twbs/bootstrap-sass but i dont tried it.