>WikiSysop: /* Ссылки */

2017-01-26T14:50:13Z

Ссылки

Нова сторінка

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

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

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

== Подготовка ==

# Установить [[Drush]]
# Установить [[Node.js | Node.js и NPM]]

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

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

<source lang="bash">drush dl bootstrap</source>

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

<source lang="bash">cd sites/all/themes/bootstrap</source>

Скачайте официальный [https://github.com/twbs/bootstrap-sass Bootstrap ported from Less to Sass]:

<source lang="bash">
git clone https://github.com/twbs/bootstrap-sass.git
</source>

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

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

<source lang="bash">
cp -R bootstrap_subtheme ../MyTheme
</source>

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

<source lang="bash">
cd ../MyTheme
mv bootstrap_subtheme.info.starterkit MyTheme.info
</source>

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

name = MyTheme

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

<source lang="bash">
drush en jquery_update -y
</source>

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

<source lang="bash">
drush en MyTheme
drush vset theme_default MyTheme
</source>

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

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

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

<source lang="bash">
mkdir images javascript sass bootstrap img js
</source>

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

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

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

<source lang="bash">
cp -R ../bootstrap/bootstrap-sass/assets/* ./bootstrap/
</source>

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

* <code>bootstrap/stylesheets/_bootstrap.scss</code>
* <code>bootstrap/stylesheets/bootstrap/_variables.scss</code>

<source lang="bash">
cp bootstrap/stylesheets/_bootstrap.scss bootstrap/stylesheets/bootstrap/_variables.scss ./sass/
</source>

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

<source lang="bash">
mv ./sass/_bootstrap.scss ./sass/style.scss
</source>

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

<source lang="bash">
sed -i 's|"bootstrap/|"../bootstrap/stylesheets/bootstrap/|g' ./sass/style.scss
</source>

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

<source lang="bash">
sed -i 's|"../bootstrap/stylesheets/bootstrap/variables";|"variables";|g' ./sass/style.scss
</source>

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

<source lang="php">
; ;;;;;;;;;;;;;;;;;;;;;
; ;; 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'
</source>

== Gulp и Browsersync ==

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

== См. также ==

* [[Sass]]
* [[Gulp]]
* [[Grunt]]
* [[LiveReload]]
* [[Node.js]]
* [[Compass]]

== Ссылки ==

* Основной источник: [https://www.deeson.co.uk/labs/using-grunt-bootstrap-compass-and-sass-drupal-sub-theme Using Grunt, bootstrap, Compass and SASS in a Drupal sub theme]
* [http://www.webfoobar.com/node/9 Using SASS in Bootstrap Drupal theme]

[[Категория:CSS]]
[[Категория:Drupal]]
[[Категория:Sass]]
[[Категория:Gulp]]
[[Категория:Bootstrap]]

Drupal с Bootstrap, Sass и Gulp - Історія редагувань

>WikiSysop: /* Ссылки */