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

Я использовал yo webapp или yo angular для создания нового проекта, и я получил Bootstrap include - версия 2.3.2, но я хочу использовать последнюю версию Bootstrap.

Как я могу обновить пакет Bootstrap с помощью командной строки и позже обновить при создании нового webapp или yo angular, выбрать включить Twitter Bootstrap - последняя версия?

Ответы

Ответ 1

Генераторы Yeoman webapp и angular захватывают Sass for Bootstrap, который основан на создании загрузочного буфера Twitter 2.3.2.

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

$ bower install --save bootstrap

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

Ответ 2

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

  • yo angular - Скажите "Нет" в Bootstrap здесь - в противном случае он загрузит версию 2.x
  • bower install --save bootstrap
  • npm 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 в нашем случае).

    update 10/5/2013: Подумайте о размещении bower:xxx внутри build:xxx.
    В нашем случае bower:css внутри build:css и bower:js внутри build:js.
    Это необходимо для минимизации работы при сборке dist. Однако я считаю, что этот подход не настолько совершенен - ​​см. Примечания ниже. Я немного извиняюсь, так как это то же самое, что версия bootstrap, полученная Yeoman по умолчанию, включена в наше приложение: -P
    Примечание.. Чтобы получить работу css minification, вам может потребоваться изменить build:css(.tmp) на build:css({.tmp,app}).

  • grunt bower-install

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

Заметки - Обновление 10/5/2013 - вдохновлено комментарием @Luke в комментарии:

Основываясь на этом, я добавил один подшаг, чтобы сделать работу по сокращению dist.

Работы по инъекциям Bower, так же как и минирование, однако я не настолько доволен этим подходом.
Причины:

  • [minor] Мы не используем уже выделенные ресурсы, полученные bower.
  • Минимизировать ВСЕ виды CSS/JS в SINGLE файле - это довольно хромая идея. Лучшим способом включения внешних зависимостей в ваше приложение будет переход между CDN-выборкой (dist) и локальными копиями, полученными с помощью bower (dev). Sth, как профили maven.
  • В зависимости от размера приложения загрузка ресурсов "все-в-одном", особенно JavaScripts, замедлит первое знакомство с нашим приложением.
    Позже остальная часть приложения будет загружена быстрее, правда, но в первый раз, когда пользователь входит на нашу страницу, эти громоздкие однопользовательские файлы должны быть загружены превентивно.

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

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

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

[email protected]:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6

Ответ 3

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

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

bower install angular-bootstrap
bower install sass-bootstrap

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

возможно, следует добавить --save

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