Drupal с Bootstrap, Sass и Gulp

Задача: настроить рабочее окружение вебмастера Drupal с наиболее мощными, быстрыми и удобными инструментами, чтобы получать в результате самый качественный и современный CSS.

Используем технологии:

1. Drupal Shell Drush
2. Препроцессорный язык Sass с синтаксисом SCSS.
3. CSS фреймворк Bootstrap
4. Система сборки Gulp
5. Автоматическое обновление окна браузера Browsersync

Подготовка

1. Установить Drush
2. Установить Node.js и NPM

Создание субтемы Bootstrap в Drupal

Перейдите в любую папку вашего сайта и скачайте тему Bootstrap:

drush dl bootstrap

Перейдите в папку темы Bootstrap:

cd sites/all/themes/bootstrap

Скачайте официальный Bootstrap ported from Less to Sass:

git clone https://github.com/twbs/bootstrap-sass.git

Появится папка sites/all/themes/bootstrap/bootstrap-sass.

Скопируйте друпаловский Bootstrap Starter Kit (папку sites/all/themes/bootstrap/bootstrap_subtheme) на уровень выше (в папку sites/all/themes) и переименуйте его в название вашей темы (для примера — MyTheme):

cp -R bootstrap_subtheme ../MyTheme

Перейдите в папку вашей новой темы и переименуйте файл bootstrap_subtheme.info.starterkit в MyTheme.info:

cd ../MyTheme
mv bootstrap_subtheme.info.starterkit MyTheme.info

Отредактируйте в файле MyTheme.info первую строку — вместо name = Bootstrap Sub-theme напишите:

name = MyTheme

Установите и включите модуль jquery_update:

drush en jquery_update -y

Активируйте вашу тему и сделайте ее основной:

drush en MyTheme
drush vset theme_default MyTheme

После этого ваш сайт на Drupal станет отображаться с темой Bootstrap.

Переключение с Less на Sass

Создайте в папке вашей темы MyTheme следующие папки:

mkdir images javascript sass bootstrap img js

Должна получиться такая структура (выделены новые папки):

• bootstrap — исходный код Bootstrap 3
• css — для сгенерированного Gulp'ом кода CSS
• images — для иконок, из которых будут генерироваться спрайты
• img — для сгенерированных Gulp'ом спрайтов
• javascript — для вручную редактируемых файлов JavaScript
• js — для обработанных Gulp'ом файлов JavaScript
• less — эту папку можно будет удалить
• sass — для вручную редактируемого кода Sass
• templates — HTML/PHP шаблоны Drupal

Скопируйте из папки sites/all/themes/bootstrap/bootstrap-sass содержимое папки assets в папку bootstrap вашей темы:

cp -R ../bootstrap/bootstrap-sass/assets/* ./bootstrap/

Скопируйте из папки bootstrap/stylesheets/ в папку sass/ два файла:

• bootstrap/stylesheets/_bootstrap.scss
• bootstrap/stylesheets/bootstrap/_variables.scss

cp bootstrap/stylesheets/_bootstrap.scss bootstrap/stylesheets/bootstrap/_variables.scss ./sass/

Переименуйте файл sass/_bootstrap.scss:

mv ./sass/_bootstrap.scss ./sass/style.scss

Отредактируйте файл sass/style.scss, заменив в нем все строки "bootstrap/" на "../bootstrap/stylesheets/bootstrap/"

sed -i 's|"bootstrap/|"../bootstrap/stylesheets/bootstrap/|g' ./sass/style.scss

Также поменяйте в этом файле строку импорта файла "../bootstrap/stylesheets/bootstrap/variables" на новый путь "variables":

sed -i 's|"../bootstrap/stylesheets/bootstrap/variables";|"variables";|g' ./sass/style.scss

Отредактируйте файл MyTheme.info — добавьте в него строку scripts[] = 'js/scripts.js' (в этом файле будет автоматически сохраняться сжатый файл, включающий в себя все JavaScript проекта):

; ;;;;;;;;;;;;;;;;;;;;;
; ;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;
scripts[] = 'js/scripts.js'
; scripts[] = 'bootstrap/js/affix.js'
; scripts[] = 'bootstrap/js/alert.js'
; scripts[] = 'bootstrap/js/button.js'
; scripts[] = 'bootstrap/js/carousel.js'
; scripts[] = 'bootstrap/js/collapse.js'
; scripts[] = 'bootstrap/js/dropdown.js'
; scripts[] = 'bootstrap/js/modal.js'
; scripts[] = 'bootstrap/js/tooltip.js'
; scripts[] = 'bootstrap/js/popover.js'
; scripts[] = 'bootstrap/js/scrollspy.js'
; scripts[] = 'bootstrap/js/tab.js'
; scripts[] = 'bootstrap/js/transition.js'

Gulp и Browsersync

Выполняйте по инструкции: Gulp

См. также

• Sass
• Gulp
• Grunt
• LiveReload
• Node.js
• Compass

Ссылки

• Основной источник: Using Grunt, bootstrap, Compass and SASS in a Drupal sub theme
• Using SASS in Bootstrap Drupal theme