Сборка Вootstrap 3 проекта с использованием Grunt

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

Что такое Grunt?

Grunt – это менеджер задач, написанный на JavaScript. В Bootstrap 3 он используется в качестве дефолтного сборщика дистрибутивных файлов и справки из исходных кодов.

В процессе работы Grunt может выполнять различные задачи. Например, компиляцию файлов LESS в CSS, минимизацию (сжатие) CSS и JavaScript, запуск различных тестов (JSHint, QUnit) и многое другое.

То, что он делает в Bootstrap 3 можно подробно посмотреть, открыв файл «Gruntfile.js». Содержимое файла определяет его конфигурацию или алгоритм, который необходим для сборки дистрибутивных файлов и справки.

Например, в «Gruntfile.js» можно определить какие компоненты необходимо включить в итоговые файлы, а какие нет.

Загрузка исходных кодов

Скачать исходные коды Bootstrap 3 можно различными способами:

• вручную, посредством нажатия на кнопку «Download source» на официальном сайте;
• с помощью пакетных менеджеров: Bower, npm или других (без справки).

С использованием npm

Менеджер пакетов npm может использоваться для загрузки фреймворка Bootstrap 3 и других библиотек, от которых он зависит.

Скачивание Bootstrap 3 с помощью npm («Node.js» должен быть установлен):

npm install bootstrap@3

С использованием Bower

Bower – это менеджер пакетов, который также как npm может использоваться для загрузки фреймворка Bootstrap 3.

Если не установлен Bower, то сначала его нужно установить (Node.js должен быть установлен):

npm install -g bower

Команда для скачивания Bootstrap 3:

bower install bootstrap#3.4.1

Bower может также обновлять скачанные пакеты. Осуществляется это с помощью команды:

bower update

Вывести все загруженные пакеты можно так:

bower list

Отличается Bower от npm подходом к установке пакетов: Bower загружает всё в одну специальную папку, а npm раскладывает пакеты по отдельным директориям в зависимости от зависимостей пакетов между собой.

Содержимое архива

Скачаем исходные коды, распакуем архив и рассмотрим его содержимое:

• dist (от distribution) – дистрибутивные файлы, которые нужно будет подключить к сайту (содержимое этой папки генерируется сборщиком);
• docs – содержит документацию к Bootstrap;
• fonts – папка с иконочным шрифтом в разных форматах;
• grunt – дополнительные файлы для сборщика Grunt;
• js – исходные js-компоненты фреймворка (в папке test находятся тесты, они нужны для отладки компонентов при их разработке и сборке);
• less – исходные стили Bootstrap, написанные на препроцессоре Less (в mixins содержатся миксины, т.е. куски препроцессорного кода для вызова их в других местах);
• Grunfile.js – содержит конфигурацию (последовательность действий) для сборки Bootstrap;
• package.json – информация о проекте и список зависимостей для его сборки из исходных кодов с помощью Grunt.

Установка Grunt

Работа Grunt основана на «Node.js».

1. Поэтому сначала необходимо скачать и установить «Node.js». Эта программа включает в себя менеджер пакетов npm (node package modules). С помощью npm будем устанавливать Grunt и другие пакеты.

2. Установить Grunt глобально. Для этого необходимо выполнить команду:

npm install -g grunt-cli

3. Перейти в корневую папку, т.е. туда где находится «package.json» и выполнить в командной строке:

npm install

В результате её выполнения npm прочитает файл «package.json» и установит список зависимостей (пакетов) необходимых для сборки Bootstrap из исходных кодов.

Процесс сборки Bootstrap посредством Grunt

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

Grunt команды

1. Создание дистрибутивных файлов из исходных кодов:

grunt dist

Эта команда выполняет создание готовых к продакшену файлов путём склеивания, компилирования и минификации исходных CSS и JavaScript файлов. Конечные файлы помещаются в директорию dist.

2. Запуск наблюдения за исходными less-файлами и сборки при их изменении:

grunt watch

3. Запуск тестирования фреймворка:

grunt test

Запускает инструмент JSHint (https://jshint.com/) и unit-тесты, написанные с помощью библиотеки QUnit (https://qunitjs.com/) для проверки кода JavaScript в PhantomJS (https://phantomjs.org/), который представляет собой веб-браузер без графического пользовательского интерфейса.

4. Сборка и проверка файлов документации:

grunt docs

Эта команда выполняет сборку документации, а также тестирование CSS, JavaScript и других файлов этой документации, которые используются для её локального запуска через Jekyll serve.

5. Полная сборка Bootstrap 3 и её тестирование:

grunt

Эта команда выполняет создание дистрибутивных файлов, сборку документации, тестирование и некоторые другие операции.

Конфигурирование и настройка Bootstrap

1. Сборка «bootstrap.js», включающая в себя только определённые js-плагины, осуществляется посредством открытия файла «Grunfile.js» и оставления в списке src только определённых строк:

...
  core: {
    src: [
      'js/transition.js',
      'js/alert.js',
      'js/button.js',
      'js/carousel.js',
      'js/collapse.js',
      'js/dropdown.js',
      'js/modal.js',
      'js/tooltip.js',
      'js/popover.js',
      'js/scrollspy.js',
      'js/tab.js',
      'js/affix.js'
    ],
  ...

Не нужные строки можно просто закомментировать.

Например, включим в «bootstrap.js» плагин слайдера, а также «collapse.js» и «dropdown.js», необходимые для работы горизонтального адаптивного меню.

Запустим команду для сборки Bootstrap::

grunt dist

Теперь, в папке «dist/js/» файлы «bootstrap.js» и «bootstrap.min.js» включают в себя только нужные скрипты и имеют намного меньший размер:

Убрать из «bootstrap.css» не нужные css-компоненты и стили можно через комментирования строчек @import в файле «less/bootstrap.less»:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

Например, исключим из сборки всё кроме основных стилей, сетки, кнопок, формы, слайдера и адаптивного меню:

После чего перекомпилируем файлы:

grunt dist

Теперь в каталоге «dist/css/» находятся файлы, содержащие только необходимые стили:

3. Переопределить дефолтные стили Bootstrap 3 можно через редактирования значений переменных LESS в файле «variables.less».

Например, изменим цветовую гамму адаптивного меню Navbar:

Пересоберём итоговые файлы:

grunt dist

4. Если при компиляции не нужно генерировать Source Maps, то это действие можно отключить установив в «Grunfile.js» ключу sourceMap значение false:

sourceMap: false,