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

Александр Мальцев
Александр Мальцев
20K
18
Сборка Вootstrap 3 проекта с использованием Grunt
Содержание:
  1. Что такое Grunt?
  2. Загрузка исходных кодов
  3. Содержимое архива
  4. Установка Grunt
  5. Процесс сборки Bootstrap посредством Grunt
  6. Комментарии

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

Что такое Grunt?

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

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

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

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

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

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

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

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

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

npm install bootstrap@3
Загрузка Bootstrap с помощью npm

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

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

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

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

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

bower install bootstrap#3.4.1

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

bower update

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

bower list

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

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

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

Содержимое архива Bootstrap
  • 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
Установка Grunt глобально

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

npm install

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

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

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

Grunt команды

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

grunt dist
Создание дистрибутивных файлов Bootstrap из исходных кодов

Эта команда выполняет создание готовых к продакшену файлов путём склеивания, компилирования и минификации исходных 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 JavaScript только из нужных плагинов

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

grunt dist

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

Дистрибутивные JavaScript файлы Bootstrap 3 включающие в себя только нужные компоненты

Убрать из «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";

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

Собираем Bootstrap 3, включающую только нужные css-компоненты

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

grunt dist

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

CSS файлы Bootstrap 3 содержащие только нужные стилевые компоненты

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

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

Изменение цветовой гаммы адаптивного меню Bootstrap Navbar посредством редактирования значений переменных LESS в файле variable.less

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

grunt dist
Изменение значений переменных LESS

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

sourceMap: false,

Комментарии:

  1. Владимир
    02 декабря 2015, 15:46
    Еще раз спасибо за доходчивый ответ!
    1. Владимир
      02 декабря 2015, 06:07
      Добрый день!
      Интересует такой вопрос. Какую версию jQuery следует подключать для Bootstap 3?
      Вроде как, по логике получается, что последнюю версию jQuery.
      Но в одном из уроков по Bootstap (на просторе интернета) автор этого урока подключает версию 1.9.1, сказав при этом только: «Bootstap поддерживает jQuery с версии 1.9.0 и выше. Я подключу 1.9.1». Дальше никаких объяснений не последовало почему именно эта версия 1.9.1, а не последняя.
      Хотелось бы услышать мнение разбирающегося человека в данном вопросе. Плюсы и минусы использования последней версии jQuery или 1.9.1?
      1. Александр Мальцев
        02 декабря 2015, 12:43
        Доброго времени, Владимир!
        Bootstrap 3 требует для своей работы, а точнее файл «bootstrap.js» версию jQuery не ниже 1.9.1.
        Лучше, конечно, всего использовать последнюю версию jQuery. На текущий момент их две: 1.11.3 (если нужна поддержка IE 8) и 2.1.4 (если не нужна поддержка IE 8).
        Минусы навряд ли, а вот плюсы есть. Это более высокое быстродействие и отсутствие огромного багажа ошибок по сравнению с версией 1.9.1. Ведь разработчики не даром трудятся и стараются сделать свой продукт лучше. На своём сайте (https://jquery.com/) они всегда публикуют в момент выхода релиза какие ошибки они исправили, какие методы получили более высокое быстродействие и т.д. Если Вам интересно, то перейдите на сайт разработчиков jQuery и почитайте об этом в разделе Blog.
        1. Владимир
          02 декабря 2015, 14:34
          Спасибо за ответ!

          Т.е. получается, что в уроке, о котором я написал в первом сообщении автору следовало просто уточнить, что версия 1.9.1 подключается для того, чтобы обеспечить поддержку старых IE. А версию 1.9.1, а не последнюю он выбрал потому (я предполагаю), что она для него проверена (железно будет работать) и у него не было времени (или просто лень) разузнать о свойствах последней версии.
          И выходит, что лучше все же на данный момент использовать версию jQuery 1.11.3 для Bootstap 3 (и при этом поддержка старых IE сохраниться).

          Ну, вроде немного стало яснее с версиями jQuery для Bootstrap. Но вот я наткнулся еще на одну статью, где рассказывается, как подключить только jQuery к сайту (уже вне контекста jQuery + Bootstap).
          И чтобы вы думали я увидел уже в этом примере, «та-да» опять jQuery 1.9.1!
          В статье рекомендуют подключить последнюю версию jQuery и тут же прописывают 1.9.1. Загадка, да и только:)
          1. Александр Мальцев
            02 декабря 2015, 15:11
            Думаю, что там опечатка.
            Поддержка старых версий IE в настоящий момент не столь актуальна. Если брать статистику, то версией IE 8 и ниже пользуются меньше 1,3% пользователей во Всём мире (https://caniuse.com/usage-table). А если брать статистику сайтов, то эта цифра достигает лишь 0,14% от всех пользователей. Тем более что на подходе уже jQuery 3.
            Да и Bootstrap 4 уже не будет поддерживать старые версии IE <= 8.
      2. Евгений
        20 ноября 2015, 12:06
        Добрый день!
        Я пока совсем ноль в кодинге. Неделя как начал обучаться, поэтому не все понятно) Сейчас устанавливаю Bootstrap на Mac.
        Не понятна вот это: «Если не установлен Bower, то сначала его нужно установить (Node.js должен быть установлен)».
        Я установил Node.js, но файла не нахожу. Или команду надо вводить в терминале? Но тогда мне выдает кучу ошибок. Поясните пожалуйста.
        1. Александр Мальцев
          20 ноября 2015, 16:20
          Здравствуйте!
          Набирать команды надо в терминале.
          1. Евгений
            20 ноября 2015, 14:41
            Update
            Файл node я нашел
            Что с ним дальше делать?)) Как запустить?
            1. Александр Мальцев
              20 ноября 2015, 16:32
              Создайте каталог, перейдите в него и запускайте команды. Данный каталог будет вашим рабочим проектом.

              Подумайте, может Вам лучше начать с самого просто, т.е. со скачивания готовой сборки этого фреймворка с сайта https://getbootstrap.com/ и библиотеки jQuery. А со временем перейдёте к более сложному.
          2. Виктор
            17 июля 2015, 19:59
            Попробую. Спасибо.
            1. Виктор
              16 июля 2015, 10:13
              Приветствую.
              Спасибо за толковый цикл статей про Bootstrap.
              Вопрос по grunt docs. Команда выполняется, но доки локально не читаемы.
              Вроде бы нужно ещё шаманство… Проясните плиз (под Windows).
              1. Александр Мальцев
                17 июля 2015, 13:33
                Привет.
                Пошаговая инструкция:
                1. Скачать PortableJekyll со страницы https://github.com/madhur/PortableJekyll.
                2. Распаковать скаченный архив «PortableJekyll-master.zip» в любой каталог.
                3. Открыть файл «setpath.cmd». Заменить "%~dp0" на путь к PortableJekyll.
                4. Запустить файл «setpath.cmd».
                5. Открыть командную строку и перейти в каталог Bootstrap.
                6. Выполнить команду jekyll serve (запуститься сервер).
                7. Открыть документацию в браузере (скриншот).
              2. Егор
                10 июля 2015, 03:47
                Здравствуйте, если я установлю версию, к примеру:
                https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
                С CDN будет подгружаться 3.4.4 (на данный момент актуальная версия)?
                1. Александр Мальцев
                  10 июля 2015, 17:37
                  Привет.
                  В maxcdn получить, таким образом, последнюю версию Bootstrap не получиться.
                  На некоторых CDN, например, googleapis, убрав последнюю цифру из пути (вместо 1.8.2 -> 1.8), вы получите последнюю версию jQuery в ветке 1.8.
                  https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
                  Убрав последние цифры из пути (вместо 1.8.2 -> 1), вы получите последнюю версию jQuery в ветке 1.
                  https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
                2. Дамир
                  17 июня 2015, 06:39
                  Привет отличная статья :)
                  А что бы использовать все эти технологии Grunt, Bower, npm, обязательно нужно ставить «Node.js»?
                  1. Александр Мальцев
                    17 июня 2015, 13:57
                    Привет, спасибо.
                    Node.js ставить нужно обязательно.
                    1. Олег
                      22 ноября 2015, 16:29
                      А еще помимо Node.js нужно обязательно установить Git (если у вас Windows: https://git-scm.com/download/win).
                      Без всё этого работать не будет или будет, но с ошибками. Причем это нужно не только для Bower, но для установки с помощью npm.

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