Разработка тем оформления для Drupal 8. Часть 4: Сборка и оптимизация

В этой статье мы подробно рассмотрим процесс сборки CSS файлов с помощью Gulp, а также затронем тему автоматической оптимизации изображений.

В предыдущей статье речь шла о создании стилей с помощью Sass, теперь же нам надо собрать и скомпилировать стили в "обычный" CSS.

Для сборки файлов темы я рекомендую использовать Gulp, как более быструю альтернативу Grunt. Gulp — это консольный инструмент, написанный на JavaScript и для его работы понадобится Node.js.

Установка Gulp

Для Ubuntu 16.04 рекомендуется устанавливать Node.js версии 8.x:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt install -y nodejs

Установка Gulp:

sudo npm install -g gulp-cli 

Начало работы

В папке темы нужно выполнить:

npm init
npm install -D gulp
npm install -D gulp-autoprefixer gulp-changed gulp-imagemin gulp-ruby-sass

Так мы инициализируем проект, установим Gulp и несколько расширений, которые понадобятся нам для сборки. Если проект уже был создан ранее, и в папке темы присутствует файл package.json, то установить все необходимое можно следующей командой:

npm install

Сам Gulp, его расширения и другие модули хранятся в папке node_modules. Информация о проекте и зависимостях — в файле package.json, а конфигурация задач сборки — в файле gulpfile.js.

Конфигурационный файл gulpfile.js представляет из себя JS файл с описанием необходимых задач.

Шаблон файла gulpfile.js:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

В этом шаблоне отсутствуют задачи, так что давайте их добавим.

Задачи и запуск сборки

Задача — это функция выполняемая Gulp или его расширением. Для описания задачи нужно определить исходные данные и дополнительные параметры, например путь к папке для результата выполнения. Задача может принимать в качестве исходных данных результаты выполнения предыдущей задачи, образуя последовательности. Формат описания задачи можно посмотреть в документации к Gulp или конкретному расширению.

Я приведу пример конфигурации, которую я обычно использую:

var gulp = require('gulp');
var changed = require('gulp-changed');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var imagemin = require('gulp-imagemin');

var SASS = 'sass';
var CSS = 'css';
var IMG = 'img';

gulp.task('sass', function () {
  return sass(SASS + '/**/*.scss', {
      compass: true
    })
    .on('error', sass.logError)
    .pipe(gulp.dest(CSS));
});

gulp.task('autoprefixer', ['sass'], function() {
  gulp.src(CSS + '/*.css')
    .pipe(autoprefixer({
        browsers: ['> 1%']
    }))
    .pipe(gulp.dest(CSS));
});

gulp.task('imagemin', function() {
  gulp.src(IMG + '/src/*')
    .pipe(imagemin())
    .pipe(gulp.dest(IMG));
});

gulp.task('build', ['sass', 'autoprefixer', 'imagemin']);

gulp.task('watch', function() {
  gulp.watch(SASS + '/**/*.scss', ['sass', 'autoprefixer', 'imagemin']);
});

gulp.task('default', ['build', 'watch']);

gulpfile.js

В примере описаны следующие задачи:

• sass — компиляция Sass;
• autoprefixer — расстановка браузерных префиксов;
• imagemin — оптимизация изображений.

Задачи сконфигурированы на выполнение в определенных папках:

• файлы *.scss в папке sass, скомпилированные стили помещаются в папку css;
• файлы изображений в папке img/src, оптимизированные изображения помещаются в папку img.

Помимо задачи сборки build, также описана задача default для отслеживания изменений в файлах *.scss и автоматического запуска процесса сборки.

Запуск задачи осуществляется командой:

gulp TASKNAME

В данном случае команда для сборки будет такая:

gulp build

Команда сборки с отслеживанием изменений (задача "по умолчанию", выполнится также если не указать название задачи):

gulp

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

Оптимизации на стороне Drupal

При помощи Gulp оптимизируются изображения, которые относятся к теме оформления. Оптимизация изображений для контентных страниц и загружаемых пользователями, может осуществляться с помощью модулей Drupal. Необходимые функции реализованы в модуле Image Optimize. Как альтернативу можно использовать также модуль ImageMagick.

Агрегацию и минификацию файлов CSS и JS также правильнее осуществлять средствами Drupal. Drupal 8 неплохо справляется с этим даже в базовой установке, а если понадобится дополнительные возможности, то для этого существует модуль Advanced CSS/JS Aggregation.

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

В следующей статье речь пойдет о шаблонах разметки элементов.