Drupal с Bootstrap, Sass и Gulp
Задача: настроить рабочее окружение вебмастера Drupal с наиболее мощными, быстрыми и удобными инструментами, чтобы получать в результате самый качественный и современный CSS.
Используем технологии:
- Drupal Shell Drush
- Препроцессорный язык Sass с синтаксисом SCSS.
- CSS фреймворк Bootstrap
- Система сборки Gulp
- Автоматическое обновление окна браузера Browsersync
- Установить Drush
- Установить Node.js и NPM
Перейдите в любую папку вашего сайта и скачайте тему 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.
Создайте в папке вашей темы 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.scssbootstrap/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