Bootstrap 3 - Установка и сборка платформы

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

Способы установки платформы Twitter Bootstrap 3

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

• вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта 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

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

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

1. npm install -g bower

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

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

1. bower install bootstrap

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

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

1. bower update

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

1. bower list

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

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

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

1. npm install bootstrap

Сборка платформы Twitter Bootstrap 3 с помощью Grunt

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

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

Установка Grunt

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

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

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

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

Grunt команды

• grunt dist (компилирует и минимизирует файлы CSS и JavaScript). Эта команда выполняет создание готовых файлов платформы, которые после этого располагаются в папке dist. Т.е. данная команда заново создаёт директорию dist, выполняет склеивание, компилирование и минимизирование файлов CSS и JavaScript, которые затем помещаются в эту директорию. Эта команда используется пользователями Twitter Bootstrap 3 наиболее часто.
• grunt watch (наблюдает за изменениями в less файлах). Данная команда используется для наблюдения за исходными файлами less и запускает задачу на автоматическую компиляцию их в CSS всякий раз, когда Вы сохраняете изменения в этих файлах.
• 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 валидатора, и многое другое.

Задание

1. Установите платформу Twitter Bootstrap различными способами.
2. Какой из способов установки платформы Twitter Bootstrap Вам понравился больше и почему?
3. Установите Grunt и соберите с его помощью платформу Twitter Bootstrap.