9.2.1. Создание темы на основе Bootstrap. Компиляция SASS через Gulp.

Gulp

В прошлом уроке мы разобрали как компилировать LESS с помощью встроенного в PhpStorm watcher'a. В этом уроке мы будем создавать тему на основе SASS Boostrap'a. Если у вас не получилось разобраться с LESS и компиляцией через PhpStorm, то можете попробовать использовать Gulp и SASS. На данном этапе уроков для нас не принципиально что использовать LESS или SASS. Но я бы рекомендовал вам использовать именно SASS и Gulp, потому что компиляция идет быстрее и настраивать Gulp проще.

Gulp - это менеджер заданий для javascript. Мы добавим с помощью него два задания одно отслеживать изменения в папке sass, когда мы дописываем стили и второе это компилировать SASS в CSS.

Давайте перейдем к установке. Я развернул чистый 8 друпал. Теперь нужно скачать тему bootstrap и положить ее в папку /themes:

https://www.drupal.org/project/bootstrap

Для использования SASS в подтемы bootstrap нам нужно использовать этот kit, который называется sass:

drupal bootstrap

Копируем эту папку sass в папку /themes отдельно от boostrap и переименовываем в имя вашей темы, у меня это будет drupalbook:

drupal bootstrap

Теперь нужно переименовать все файлы с THEMENAME на имя вашей темы. Например у нас есть файл THEMENAME.starterkit.yml, его нужно будет переименовать в drupalbook.info.yml. THEMENAME.libraries.yml нужно переименовать в drupalbook.libraries.yml и так далее. Не забудьте переименовать файлы в папке config файлы, там они тоже есть с THEMENAME:

drupal bootstrap

Внутри файлов тоже может быть THEMENAME, например в файле sass/config/schema/THEMENAME.schema.yml:

drupal bootstrap

Чтобы убедиться, что вы ничего не пропустили поищите THEMENAME по всей папке подтемы через PhpStorm:

drupal bootstrap

Вбиваем в поиске THEMENAME и там где найдется исправляем на имя нашей темы.

drupal bootstrap

Теперь нужно скачать сам bootstrap и положить его в папку /themes/drupalbook/bootstrap:

http://getbootstrap.com/getting-started/#download

Нас интересует SASS версия bootstrap'а:

drupal bootstrap

Для нашей темы нам нужна вся папка bootstrap, кладем ее так чтобы путь к папке assets был такой /themes/drupalbook/bootstrap/assets:

drupal bootstrap

Мы скопировали все нужные для темы файлы, теперь нужно подключить Gulp для компиляции SASS. 

Сначала нам потребуется установить Node.js:

https://nodejs.org/en/

Node.js - это среда выполнения javascript кода, она позволяет исполнять код для компиляции SASS в CSS. Ставится в Windows она как обычная программа. Качать лучше последнюю версию, на данный момент 7.x.x:

drupal node.js

После того как вы устновили Node.js вам нужно будет перезапустить PhpStorm или перезапустить консоль CMD если она у вас открыта. Консоль для работы с node.js можно открыть как в PhpStorm:

node.js console

Так и через меню Пуск:

node.js console

В консоле нужно набрать node -v, чтобы проверить что Node.js установился правильно:

node.js console

Если не получилось поставить 7.x.x версию, попробуйте поставить 6.x.x.

Дальше нам нужно перейти в папку с нашей темой drupalbook и установить Gulp. Переходим в консоли по папкам мы через команду cd. Команда cd .. (cd пробел и две точки) позволяет перейти в родительску папку:

drupal console

Чтобы переключить другой диск, нужно набрать команду D: (где D может быть любым), так вы переключетесь на нужный раздел диска, в данном случае это диск D.

drupal console

Теперь когда вы перешли в папку с вашей темой, устанавливаем Gulp. Устанавливать будем с помощью менеджера пакетов npm он устанавливается сразу с Node.js. Сначала инициализируем новый набор компонентов npm:

npm init

Это создаст нам файл package.json, в этом файле будут показаны все пакеты, которые мы поставим через npm. При выполнение команды просто жмите Enter:

npm init console

В результате будет сформировован вот такой вот файлик package.json:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.",
  "main": "assets/javascripts/bootstrap.js",
  "style": "assets/stylesheets/_bootstrap.scss",
  "sass": "assets/stylesheets/_bootstrap.scss",
  "files": [
    "assets",
    "eyeglass-exports.js",
    "CHANGELOG.md",
    "LICENSE",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git://github.com/twbs/bootstrap-sass"
  },
  "keywords": [
    "bootstrap",
    "sass",
    "css",
    "eyeglass-module"
  ],
  "contributors": [
    "Thomas McDonald",
    "Tristan Harward",
    "Peter Gumeson",
    "Gleb Mazovetskiy"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/twbs/bootstrap-sass/issues"
  },
  "devDependencies": {
    "node-sass": "^3.8.0",
    "mincer": "~1.4.0",
    "ejs": "~2.4.2"
  },
  "eyeglass": {
    "exports": "eyeglass-exports.js",
    "needs": "^0.7.1"
  }
}

Теперь выполняем следующую команду, устанавливаем Gulp:

npm install --save-dev gulp

Если вывелось дерево установленных файлов и никаких ошибок, то все прошло хорошо:

Следующей командой ставим пакет gulp-sass:

npm install --save-dev gulp-sass

Мы установили пакеты gulp, gulp-sass, теперь нужно создать задания для gulp'а (gulp tasks). Для этого создаем в корне темы файл Gulpfile.js:

/themes/drupalbook/Gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'))
});

//Watch task
gulp.task('default',function() {
    gulp.watch('scss/**/*.scss',['styles']);
});

Мы указали компилировать файлы SASS в папку css, но этой папки нет сразу в нашей теме, ее нужно создать, также добавьте туда файли style.css:

/themes/drupalbook/css/style.css

В этом файле будет весь наш скомпилированный CSS.

Все готово для того чтобы запускать компиляцию SASS. Для этого заходим через PhpStorm в папку с темой и выбираем наш Gulpfile.js и в контекстном меню выбираем Show Gulp Tasks:

gulp tasks phpstorm

Выбираем задание default и сразу откроется окно этого таска:

gulp taks bootstrap

Теперь каждый раз когда мы будем менять SASS в нашей темы gulp будет автоматически перекомпиливать SASS.

bootstrap sass gulp

В результате компиляции в нашем файле style.css появится CSS и цвет фона сайта станет желтым:

gulp sass

По началу может казаться, что это долго настраивать компиляцию с помощью Gulp, но если у вас уже стоит Node.js, то вам нужно только добавить файл Gulpfile.js и установить пакеты gulp, gulp-sass. Если у вас возникли трудности с утрановкой и настройкой пишите в комментариях, будем разбираться.

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Не совсем понятно, для чего

Не совсем понятно, для чего вы вообще компилировали. В официальной документации https://drupal-bootstrap.org/api/bootstrap, в их инструкции, они не компилируют, а работают напрямую с исходниками, тем более там всё настроенно под такой путь, да и с обновлением бутстрапа проблем не будет, и с переопределением файлов тоже нет проблем.

Мы компилируем bootstrap с

Мы компилируем bootstrap с нашими переопределенными переменными. Можете посмотреть файл variables-override.scss. Boostrap определяет переменные, а мы можем через тему друпала и в частности через variables-override.scss их переопределить. Например если нам нужно изменить размер экрана под tablet и скомпилируем bootstrap отдельно от наших стилей темы, то тогда нам нужно будет  в нашем CSS переопределять размер экрана tablet для всех стилей где переменная $tablet была использована, а это не удобно. Гораздо удобнее просто подменить переменную $tablet перед компиляцией bootstrap.

Без компиляции это тоже

Без компиляции это тоже делается довольно просто:
1. Вы следуете официальной инструкции
2. Копируете файл _bootstrap.scss в папку scss вашей темы
3. В нём меняете пути, чтобы они шли в папку с исходником бутстрапа, например:
@import "bootstrap/variables";
меняете на:
@import "../bootstrap/assets/stylesheets/bootstrap/variables";
4. В главном файле style.scss меняете путь подключения бутстрапа на:
// Bootstrap Framework.
@import 'bootstrap';
т.е. на ваш переписанный, а не на ядро фреймворка
5. Если нужно переопределать переменные, вы легко переопределяете их в файл _default-variables.scss. Можете их туда для удобства все скопировать из файла _variables.scss и закомментировать.

При таком подходе, если что-то в фреймворке меняется, вы легко обновляетесь и ничего не компилируете снова

Я помоему изначально не понял

Я помоему изначально не понял сути статьи ))) Я думал вы тут компилируете сами исходники и получаете из них тему, как здесь: http://www.angarsky.ru/drupal/drupal-bootstrap-framework-nastroyka-sass....
А вы тут просто компилятор из sass настраиваете в среде, извиняюсь )

Через watcher в PhpStorm не

Через watcher в PhpStorm не всегда удобно настраивать компиляцию. Потому что у всех в операционной системе по разным папкам могут лежать бинарники препроцессора. Да и другие тонкости есть. А gulp одинаково во всех системах ставится, потому что работает в Node.js.

Добрый день, Иван. Делаю все

Добрый день, Иван. Делаю все как вы показываете, работаю в Sublime Text 3 при попытке компилировать файл выскакивает ошибка, ни как не могу понять с чем она связана и как ее исправить?

[Finished in 0.2s with exit code 1]
[cmd: ['sass', '--update', 'C:\\OpenServer\\domains\\drupal8\\themes\\gravitygroup\\scss\\style.scss:C:\\OpenServer\\domains\\drupal8\\themes\\gravitygroup\\scss/style.css', '--stop-on-error', '--no-cache']]
[dir: C:\OpenServer\domains\drupal8\themes\gravitygroup\scss]
[path: C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files\nodejs\;C:\Users\Aleksandr\AppData\Roaming\npm]

Здравствуйте, спасибо за

Здравствуйте, спасибо за уроки.
Решил оставить коммент в связи с тем, что предложенный Вами вариант требует денежных вложений. Лицензия на PhpStorm для индивидуального разработчика стоит $89 долларов и последующие годы продление чуть дешевле.
Я думаю что большая часть Вашей аудитории только учится - стоит ли вкладывать деньги на начальном этапе?? У Brains есть конечно замечательные бесплатные лицензии, в том числе и для друпалеров, но я, например, не подпадаю под их требования.
Для компиляции sass/scss в css есть OpenSource бесплатные проекты. Я попробовал пока один вариант Scout - у меня все получилось, на нем пока и остановлюсь.
Механизм прост, скачиваем дистрибутив, читаем install instruction.txt, устанавливаем, добавляем новый проект, настраиваем откуда берем папку с scss, в какую папку кладем готовый css. Жмем кнопку play на проекте и далее уже работаем с файлом drupalbook/scss/style.scss - сохраняем и получаем готовый style.css в настроенной ранее папке.
style.scss откроется любым текстовым редактором, например NotePad++
З.Ы. PhpStorm конечно очень удобная вещь, но платная - я всего лишь изложил альтернативный вариант.

Я никого не к чему не

Я никого ни к чему не призываю, но PhpStorm можно скачать и поставить бесплатно сами знаете где. 

Можете использовать Atom:
https://atom.io/

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

Для тех у кого НЕ

Для тех у кого НЕ устанавливается GULP.
npm install --save-dev gulp@next
Исправляем файл Gulpfile.js
было: gulp.watch('scss/**/*.scss',['styles']);
стало: gulp.watch('scss/**/*.scss',gulp.series('styles'));