How to Update and Include Twitter Bootstrap 3 on Webapp or Yo Angular

How to update and include Twitter Bootstrap 3 on webapp or yo angular?

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.

Yeoman and Bower not adding Bootstrap CSS (AngularJS generator)

After doing the codelab I had exactly the same problem with the same result as you are getting (warnings and all). I had to just work around the issue by rolling back to Bootstrap 3.3.4.

Just edit bower.json and change the Bootstrap line to:

    "bootstrap": "3.3.4",

Then run the following and it should work:

    bower install
    grunt serve

yeoman/grunt-usemin not updating index.html after new js has been added

I repeatedly bumped into this problem and have found a solution in my case.

I am using vs 2012 to create my HTML and cmd for the grunt tasks. It seems that my Line endings were not correct, so I changed them to Unix (LF) and grunt-usemin did its thing. When settings the line endings to Windows (CR LF) grunt-usemin don’t update the index.html page correctly.

Hope this helps somebody!

How to configure Grunt to replace Bower dependencies by its minified versions

Minified versions of the JavaScript libraries you're using will eventually not be shipped with Bower modules. Minifying and concatenating is not something the package manager is responsible for, but your build pipeline.

With Yeoman, the recommended way is to use grunt-usemin, which will take care of all the necessary steps. You can see an example of this when scaffolding out a new app with yo webapp and taking a look at the generated Gruntfile.js and index.html.

In your case, you would need to add a comment around your script includes:

<!-- build:js scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>
<!-- endbuild -->

And make sure to have the corresponding usemin tasks in your Grunt pipeline:

useminPrepare: {
    options: {
        dest: 'dist'
    },
    html: 'app/index.html'
},
usemin: {
    options: {
        dirs: ['dist']
    },
    html: ['dist/{,*/}*.html'],
    css: ['dist/styles/{,*/}*.css']
},

---

Related Topics