Как обновить и включить Twitter Bootstrap 3 в webapp или yo angular?

Генераторы webapp и angular от Yeoman захватывают Sass для Bootstrap, который основан на сборке 2.3.2 Twitter Bootstrap.

После запуска yo webapp или yo angular вы можете добавить Bootstrap 3.0, выполнив следующую команду.

$ bower install --save bootstrap

Это загрузит Bootstrap 3.0 для вас.

Ответ @micjamking - действительно хороший совет, но, поскольку с Йоманом все должно быть проще, я сэкономлю вам время на гугление:

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 (в нашем случае это таблица стилей начальной загрузки и JS).

   обновление от 05.10.2013: рассмотрите возможность размещения 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

Готовый. Теперь запустите сервер (grunt server) и Bootstrap 3 будет доступен.

Основываясь на этом, я добавил один подэтап, чтобы dist минификация работала.

Инъекция Бауэра работает, так же как и минимизация, однако я не очень доволен этим подходом.
Причины:

1. [minor] Мы не используем уже минифицированные ресурсы, полученные Bower.
2. Сокращение ВСЕХ видов CSS/JS в ОДИН файл — довольно хромая идея. Лучшим способом включения внешних зависимостей в ваше приложение было бы переключение между CDN-fetch (dist) и локальными копиями, полученными с помощью Bower (dev). Sth, как профили maven.
3. В зависимости от размера приложения загрузка ресурсов «все в одном», особенно JavaScript, замедлит первое знакомство с нашим приложением.
   Позже остальная часть приложения будет загружаться быстрее, правда, но при первом входе пользователя в наш страницы эти громоздкие однофайловые файлы должны быть предварительно загружены.

@yao tony тоже не нашел такой подход крутым - см. упомянутый вопрос.

Обновление от ноября 2013 г. Вы можете использовать задачу cdnify от grunt. Это круто

Версии программного обеспечения, которые я использовал:

user@machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6

Для обновления sass Bootstrap:

Это работает для меня:

bower install angular-bootstrap
bower install sass-bootstrap

и выберите новые версии обоих...

может стоит добавить --save

Примечание. sass-bootstrap устарел, теперь он является официальной беседкой для sass-версии бутстрапа https://github.com/twbs/bootstrap-sass, но я не пробовал.