На этом уроке мы рассмотрим различные варианты, с помощью которых Вы можете установить платформу Twitter Bootstrap 3 в свой веб-проект. Кроме этого познакомимся с процессом сборки платформы Twitter Bootstrap 3 с помощью Grunt.

Устанавливать и управлять платформой Twitter Bootstrap 3 можно различными способами:

Bootstrap - способы установки

  • вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. Данный способ является наиболее трудоёмким, так как Вам придётся выполнять все действия связанные с установкой и последующим обновлением платформы вручную.
  • с помощью указания файлов, находящихся на серверах CDN. Данный способ имеет некоторые преимущества, перед предыдущим способом, а именно:
    • уменьшает нагрузку на Ваш сервер, т.к. загрузка файлов происходит с CDN;
    • увеличивает скорость загрузки веб-страницы, т.к. необходимые файлы берутся из кэша браузера. Это происходит только в том случае, если до этого (т.е. на других сайтах) эти файлы загружались аналогичным образом, т.е. из этого же CDN.
    • <!-- Последняя версия компилированного и минимизированного файла CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <!-- Тема (не обязательна) -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
      <!-- ... -->
      <!-- Последняя версия компилированного и минимизированного файла JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      
  • с помощью Bower (http://bower.io);
  • с помощью npm (http://www.npmjs.com).

Bower - менеджер пакетов, который может использоваться для установки платформы Twitter Bootstrap 3 и сторонних библиотек, которые требуются для работы этой платформы. Он значительно упрощает установку этой платформы и избавляет веб-разработчика от выполнения многих рутинных операций, которые могут быть связаны: с посещением необходимых сайтов для скачивания с них архивов библиотек, с распаковкой этих архивов в директорию проекта, с обновлением версий библиотек и др.

Bootstrap - логотип Bower

Для установки bower необходимо ввести в "node.js" следующую команду:

npm install -g bower

Bootstrap - установка Bower

Перечень библиотек и файлов, которые необходимо загрузить, находится в файле bower.json. Кроме самих библиотек в этом файле, также содержатся и требования к версиям этих библиотек.

Внимание: для работы Bower необходим Git, который можно скачать с сайта https://git-scm.com/.

Bootstrap - Git

Для установки Twitter Bootstrap 3 Необходимо ввести следующую команду:

bower install bootstrap

Установка Twitter Bootstrap с помощью Bower

Bower кроме установки различных пакетов, может также использоваться, и для обновления этих пакетов.

Для обновления библиотек достаточно просто ввести команду:

bower update

Обновление Twitter Bootstrap и пакетов от которых он зависит с помощью Bower

Для вывода списка всех установленных пакетов можно воспользоваться командой:

bower list

Bower - получение списка установленных пакетов

Менеджер пакетов npm, также как и Bower, может использоваться для установки платформы Twitter Bootstrap 3 и библиотек, которые требуются для работы данной платформы. Отличается npm от Bower подходом к установке необходимых библиотек. Если Bower загружает всё в одну специальную директорию, то npm раскладывает всё по отдельным директориям в зависимости от зависимостей пакетов (библиотек) между собой.

Bootstrap - логотип npm

Для установки Twitter Bootstrap 3 с помощью npm необходимо ввести следующую команду:

npm install bootstrap

Установка Twitter Bootstrap с помощью npm

Bootstrap - логотип Grunt

Grunt (http://gruntjs.com) используется для процесса сборки платформы Twitter Bootstrap 3, который включает: компиляцию файлов LESS в CSS, минимизацию (сжатие) файлов CSS и JavaScript, запуск различных тестов (JSHint, QUnit) и многое другое.

Представляет собой Grunt npm-модуль в "node.js". Задачи, которые он выполняет, также осуществляются с помощью npm модулей.

Перед установкой Grunt Вам сначала необходимо скачать и установить "node.js" (http://nodejs.org/download/), который включает в себя менеджер пакетов npm (node package modules). Данный менеджер будет использоваться как для установки самого Grunt, так и для установки и управления различными модулями, с помощью которых он выполняет свои задачи через "node.js".

Порядок действий при установке Grunt в командной строке:

  1. Установить grunt-cli с помощью команды: npm install -g grunt-cli. Bootstrap - установка Grunt
  2. Перейти в корневую директорию /bootstrap/ выбранного проекта и выполнить: npm install. В результате выполнения этой команды менеджер пакетов npm прочитает файл "package.json" (https://github.com/twbs/bootstrap/blob/master/package.json), который содержит список зависимостей и автоматически установит их. Bootstrap - установить пакеты, необходимые для работы команд Grunt

После завершения, вам будут доступны для запуска из командной строки различные команды Grunt.

  • grunt dist (компилирует и минимизирует файлы CSS и JavaScript). Эта команда выполняет создание готовых файлов платформы, которые после этого располагаются в папке dist. Т.е. данная команда заново создаёт директорию dist, выполняет склеивание, компилирование и минимизирование файлов CSS и JavaScript, которые затем помещаются в эту директорию. Эта команда используется пользователями Twitter Bootstrap 3 наиболее часто. Bootstrap - результат выполнение команды grunt dist
  • grunt watch (наблюдает за изменениями в less файлах). Данная команда используется для наблюдения за исходными файлами less и запускает задачу на автоматическую компиляцию их в CSS всякий раз, когда Вы сохраняете изменения в этих файлах. Bootstrap - результат выполнение команды grunt watch
  • grunt test (тестирования платформы). Запускает инструмент JSHint (http://jshint.com) и unit-тесты, написанные с помощью библиотеки QUnit (http://qunitjs.com), для проверки кода JavaScript платформы Twitter Bootstrap 3 в PhantomJS (http://phantomjs.org), который представляет собой веб-браузер без графического пользовательского интерфейса.
  • grunt docs (сборка и тестирование документации). Команда grunt docs выполняет сборку документации, а также выполняет тестирование CSS, JavaScript и других файлов этой документации, которые используются для её локального запуска через Jekyll serve.
  • grunt (полная сборка платформы Twitter Bootstrap и её тестирование). Данная команда выполняет компиляцию и минимизирование файлов CSS и JavaScript (директория dist), сборку документации и её проверку с помощью HTML5 валидатора, и многое другое.
  • Если у Вас возникли проблемы с установкой зависимостей или запуском команд Grunt, то первым делом удалите директорию /node_modules/, созданную менеджером пакетов npm. После этого повторно запустить команду: npm install.
    1. Установите платформу Twitter Bootstrap различными способами.
    2. Какой из способов установки платформы Twitter Bootstrap Вам понравился больше и почему?
    3. Установите Grunt и соберите с его помощью платформу Twitter Bootstrap.